Copyright: Copyright 1998 Adobe Systems, Inc.


Shortcuts

General

Text handling

QuickTime editor

Links

Site window

Style sheets

Timeline

Tag handling (Outline view)

Frames

Tables (Layout View)

Source code handling (Source view)


General
Shortcuts

General

 Shift   [image] Key

Duplicate selected object	Ctrl –drag
Live update when resizing boxes	Ctrl –resize
Move boxes (based on snap-to-grid setting)	, [image], [image], or
Move boxes (toggling snap-to-grid setting)	Ctrl + Alt + [image], [image], [image], or


Text handling
Shortcuts

Text handling

 Shift   [image] Key

Cursor to next/preceding word	Ctrl + [image] or
Cursor to beginning/end of line	Home/End
Select a word	Double click
Select a line	Triple click
Select a paragraph	Quadruple click
Increase selection	+ [image], [image], [image], or
Select to beginning/end of line	Home/End +
New line instead of paragraph	+ Enter
Non breaking space	+ spacebar
Insert word break tag <WBR>, enabling the browser to hyphenate the word at the point of insertion	Ctrl –dash
Lists
New list item without bullet or label	Ctrl + Enter
New list item without spacing	+ Enter


QuickTime editor
Shortcuts

QuickTime editor

 Shift   [image] Key

Play movie	Enter
Scroll backward/forward	or
Sprite Track
Select next/previous keyframe	or
Select keyframe of the upper/lower Sprite Subtrack	or
Drag & copy keyframe sample of a sprite	Alt –click
Create keyframe sample of a sprite	Ctrl –click


Links
Shortcuts

Links

 Shift   [image] Key

Open link	Click right mouse button
Copy text and link within a page	Ctrl –click + drag and drop
New link	Select item + Alt –drag to desired destination. Release the mouse button when the object highlights.


Site window
Shortcuts

Site window

 Shift   [image] Key

Activate tab on drag and drop	Move over tab while dragging
Files Tab
Locates file in Explorer	Right click on file object
Show properties information for object	Right click on file object
Site Tab
Create a generic link	Ctrl + [image] –drag
Zoom in	–click
Zoom out	Alt + [image] –click
Move view	Ctrl + [image] –drag (only enabled when cursor is not positioned over a document)
Toggle selection	Ctrl -click


Style sheets
Shortcuts

Style sheets

 Shift   [image] Key

Stack styles	Alt –click inline or div styles for same selection in Text Inspector


Timeline
Shortcuts

Timeline

 Shift   [image] Key

Select next/previous keyframe	or
Select next/previous track	or
Play a scene beginning at the current time cursor location	Enter (numerical keypad)
Stop scene playback	0 (numerical keypad)
Create a new keyframe	Ctrl –click a time track
Duplicate a keyframe	Alt –drag keyframe
Create an action placeholder	Ctrl –click on action track
Delete the selected action	Backspace or delete
Scale an animation while maintaining the relative time positions of all keyframes on the same time track	Ctrl + [image] –drag


Tag handling (Outline view)
Shortcuts

Tag handling (Outline view)

 Shift   [image] Key

Expand or collapse the selected tag	Enter
Recursively expand or collapse the selected tag	+ Enter
Show or hide the tag attribute list	Enter
Recursively show or hide the tag attribute list	+ Enter (numerical keypad)
Activate the next text box	Tab
Activate the preceding text box	+ Tab
Delete the current selection	Backspace or Delete
Activate the tag selection pop-up menu	Ctrl –click tag name


Frames
Shortcuts

Frames

 Shift   [image] Key

Define content page	Ctrl –drag from the frame to the desired page in the site window


Tables (Layout View)
Shortcuts

Tables (Layout View)

 Shift   [image] Key

Change table height	Alt –resize
Select multiple cells	–click
Add columns or rows	Ctrl + [image] –drag
Resize table interactively, showing content	Ctrl –drag
Add column at point of intersection	+
Delete current column	Delete
Delete current row	+ Backspace
Span columns, joining current cell with cell to the right	+
Reduce column span, splitting the current cell	+
Span rows, joining current cell with cell below	+
Reduce row span, splitting the current cell	+
Move text cursor to next cell to the right	Tab
Move text cursor to next cell to the left	+ Tab
Switch from text entry to cell selection mode	Ctrl + Enter
Switch from cell selection to text entry mode	Enter
Select all cells in column	–click at top of column


Source code handling (Source view)
Shortcuts

Source code handling (Source view)

 Shift   [image] Key

Cursor to next/preceding word	Ctrl + [image] or
Cursor to beginning/end of line	Home/End
Select a word	Double click
Select a line	Triple click
Decrease/increase selection one character	+ [image] or
Decrease/increase selection one word	Ctrl + [image] + [image] or
Decrease/increase selection one line	Home/End + [image] + [image] or


Looking at the Work Area

The unique layout view and complete set of authoring tools of Adobe GoLive let you lay out Web pages visually, with drag-and-drop ease.

See also:

Using the document window

Using the site window

Switching between windows

Using the Palette

Using Inspectors

Using the Color Palette

Using the Point and Shoot feature

Using window and palette controls

Using context menus

Using online Help in Windows

Setting preferences


Using the document window
Looking at the Work Area

Using the document window

The Adobe GoLive Layout view provides a comprehensive set of features for building Web pages, including tools for creating pages and adding text, images, color, and animation.

A. Click to show or hide the head section pane. B. Click to open the JavaScript editor. C. Click to open the TimeLine editor. D. Click to create a style sheet in the head sectionpane of the page. E. Click to show or hide the pixel rulers. F. Click to customize thescreen display, preview low-resolution images, and preview CSS pages. G. Click thepop-up menu to set the size of your page.

See also:

Changing document views

Previewing your work


Changing document views
Using the document window

Changing document views

For easy access to the editing environment that best suits your needs, Adobe GoLive offers several document views. Each of the document views is accessed by clicking the appropriate tab in the document window.

•   The Layout view ( [image]) lets you enter content (Layout Editor). You can insert a layout grid on which you can place text and other objects, just as you would in a frame-oriented desktop publishing program. The Layout view is also where you create DHTML animation and use the advanced formatting controls available with cascading style sheets.

•   The Frames view ( [image]) lets you subdivide your Web page into frame sets and display pages in frames (Frame Editor).

•   The Source view ( [image]) is a full-featured HTML text editor that supports drag-and-drop editing and syntax highlighting (HTML Source Editor).

•   The Outline view ( [image]) gives you a closer look at the hierarchical structure of your document, displaying the structure of your HTML code (HTML Outline Editor).

•   The WebObjects Editor ( [image]) allows you to edit declarations files for dynamic Web pages for use with the WebObjects Server (WebObjects Declaration Editor). (This tab is only available if the WebObjects module is installed.) For more information, see the Using WebObjects manual.


Previewing your work
Using the document window

Previewing your work

Adobe GoLive lets you preview the results of your work instantly, without launching a browser. For easy access to the preview that best suits your needs, click the appropriate tab in the document window:

•   Click the Layout Preview tab ( [image]) to preview pages created with the Layout Editor, the HTML Source Editor, and the HTML Outline Editor.

•   To preview pages created with the Frames Editor, in Windows click the Layout Preview tab ( [image]), in Mac OS click the Frame Preview tab ( [image]).


Using the site window
Looking at the Work Area

Using the site window

You store everything you need to create a site, such as pages, graphics, and movies, in your site window.

Windows: Click to open the bottom section of the site window. The bottom panes show the Errors tab, the FTP tab, and the Extra tab.

Mac OS: Click to open the right pane of the site window. The right pane shows the Errors tab, the FTP tab, and the Extra tab.


Switching between windows
Looking at the Work Area

Switching between windows

You can use the Toggle Between Windows button or the Select Window pop-up menu (arrow) in the toolbar to switch between any open windows.

A. Click to return to the document window. B. Click to return to the site window. C. Click to list all active windows.


Using the Palette
Looking at the Work Area

Using the Palette

The Palette contains a number of icons representing HTML tags, structural page elements, and generic site objects. The number of tabs in the Palette depends on the modules you installed or activated in the Modules Preferences dialog box. For example, the default installation doesn’t include the WebObjects module, so the WebObjects tab does not appear in the Palette by default.

If the Palette is not open, choose View > Palette (Windows), or choose Window > Palette (Mac OS). To add an object to your document window, you simply drag the icon from the Palette to the document window. Alternatively you can double-click the icon in the Palette. You can also use the Custom tab in the Palette to store objects that you use often.

Note: As your pointer passes over an icon, the name of the icon appears at the bottom of the Palette window.

The Palette icons are grouped under tabs. To see the icons for a particular tab, click the tab:

Basic tab ( [image]) Each icon represents an HTML tag that can be used in the body section of the page.

Forms tab ( [image]) Each icon represents an HTML form tag that can be used in the body section of the page.

Head tab ( [image]) Each icon represents an HTML head tag that can be used in the head section of the page.

Frames tab ( [image]) Each icon represents an HTML frame set tag that can be used in the Adobe GoLive Frames view.

Site tab ( [image]) Each icon represents a generic site object that can be used in the site window.

Site Extras tab ( [image]) Each icon represents a stationery page that can be used in the site window.

CyberObjects tab ( [image]) Most icons represent a grouping of HTML tags and JavaScript code that can be used in the body or head section of the page.

QuickTime tab ( [image]) Each icon represents a QuickTime Movie element—video, effects, sprite, sound, music, HREF, or chapter—that creates a new, empty track.

WebObjects tab ( [image]) Each icon represents a WebObjects-specific HTML tag that goes into the body section of the page. You can select additional groupings from its pop-up.

Custom tab ( [image]) You can drag objects from the Layout view, store them in this Custom tab, and use them in building any future Web pages and Web sites. Thumbnail previews help you identify stored objects.


Using Inspectors
Looking at the Work Area

Using Inspectors

You use the context-sensitive Inspector to set the attributes of text or objects in your document or site window. Inspectors are the source of point-and-shoot linking; they also let you reference image files or other resources, resize elements with pixel-level precision, align objects with respect to adjacent text, control object spacing between objects, and make many tag-specific settings.

A. Check box B. Color field C. Pop-up menu D. Radio button E. Enter button F. Point and Shoot button G. Text box

If no Inspector window is open choose View > Inspector (Windows), or Window > Inspector (Mac OS). Drag an icon from the Palette or select text or an object in the document or site window, and set the attributes in the context-sensitive Inspector.

•   Radio buttons let you select one of a group of options. A black bullet indicates that the option is selected.

•   The Point and Shoot button appears in any Inspector that lets you make a hyperlink to another page or embed an image or media item.

•   Text boxes are used for entering numerals, measurements (in pixels or percent), URLs, etc. Click in the text box, and enter the desired value. If present, click the Enter button ( [image]) to the right of the text box to make the change, or press Enter on the keyboard.

•   Check boxes toggle options on and off. A check mark indicates that an option is selected.

•   Color fields let you color the currently selected element. Click the check box to activate the color attribute. Choose a color in the Color Palette. Drag the color from the color preview pane of the Color Palette to the color field in the Inspector. The color of the selection changes accordingly.

•   Pop-up menus let you choose from a set of options. Click to show the pop-up menu. Drag to required item, and release the mouse button to make your selection.


Using the Color Palette
Looking at the Work Area

Using the Color Palette

The Color Palette is the drag-and-drop coloring tool. You color objects by selecting a color from a rich choice of different color spaces and dropping the color on either a color field in the Inspector window or on selected text in the document window.

The Color palette offers a number of color spaces and a grayscale, each on a separate tab. See Adding color for information on each palette.


Using the Point and Shoot feature
Looking at the Work Area

Using the Point and Shoot feature

You can also use the Adobe GoLive unique point and shoot feature to easily link Web pages or to assign an image or media file to a placeholder inserted from the Palette.

To use Point and Shoot:

1  Select the placeholder you want to link from in the document window.

2  Drag from the Point and Shoot button ( [image]) in the Inspector window to the item you want to link to, or Alt-drag (Windows) or Command-drag (Mac OS) from the placeholder icon to the item you want to link to. Release the mouse button when the destination object is highlighted.

The connecting line blinks to indicate that the point and shoot operation has been successful. (If the line recoils, you have released the mouse button too soon or the object cannot be linked.) The object you have linked to appears in the URL or Source text box of the Inspector and the link is immediately active.


Using window and palette controls
Looking at the Work Area

Using window and palette controls

In Windows, you can use the standard minimize and maximize controls to adjust the display of windows and palettes.

Adjust the display of windows and palettes as follows:

•   To collapse all tabs in a window, double-click any tab (Mac OS only).

A. Click any tab to collapse all tabs within the active window. B. Click just below the title bar to show all tabs again.

•   To collapse any document window or site window to its tab, Crtl-click its title bar. You can also drag its title bar to the bottom of your screen. Click the tab to reopen the window (Mac OS only).

•   Ctrl-click the title bar to collapse the Palette, Inspector, or Color Palette into its icon., You can also drag the window to the right edge of your screen. Click the icon to reopen the window (Mac OS only).

•   To change the sort order in a list window such as the site window or Web database window, click the list name (Mac OS).

A. Descending sort order B. Ascending sort order

•   To resize the columns in a list window, drag the right border of the column header to the left or right.

•   To swap columns in a list window, press Ctrl-drag (Windows) or Command-drag (Mac OS) and the column head. (You can never move the leftmost column.)

•   To dock the Palette or an Inspector (Windows) drag it to the right edge of the application window. To free the Palette or an Inspector, double-click on its title bar. To move the Palette or Inspector out of the application window and not dock it, Ctrl-drag it.


Using context menus
Looking at the Work Area

Using context menus

In addition to the menus that appear at the top of your screen, Adobe GoLive contains a number of context-sensitive menus that give you quick access to commonly used commands.

To display context menus:

Position the pointer over any text or object, and do one of the following:

•   In Windows, click with the right mouse button.

•   In Mac OS, press Control and hold down the mouse button.

A context menu in the site window


Using online Help in Windows
Looking at the Work Area

Using online Help in Windows

Adobe GoLive for Windows includes complete documentation in online Help, including all of the information in this user guide, plus keyboard shortcuts, and more.

To get online help in Windows:

Choose Help > Help Topics.


Setting preferences
Looking at the Work Area

Setting preferences

Numerous program settings are stored in the Adobe GoLive preference file, located inside the GoLive directory (Windows), and the Preferences folder in your System folder (Mac OS). Most of these preferences are set in the Preferences dialog box.

To open the Preferences dialog box:

1  Choose Edit > Preferences.

2  Click the required icon in the left pane (if necessary, expand it by clicking the symbol next to the icon). Set the required preferences in the right pane. For detailed information on a particular preference or set of preferences, see the index.


Setting Up Pages

Creating pages

Setting page size, background, and text color

Customizing the screen display

Saving pages

Naming files

Adding HTML head tags

Working with nonroman character sets


Creating pages
Setting Up Pages

Creating pages

Before you start creating a Web page, you should have all the graphics and media objects you want to use in place. You should also know what your page will look like and what it will contain. And you will want to collect all the items you want to use in your Web site, and put them into the Adobe GoLive site window. The site window makes it easy for you to keep track of your resources, no matter how large your site grows. See Managing Web Sites.

There are several ways to create a new Web page in Adobe GoLive. (You determine how your new pages look by setting preferences in the Adobe GoLive General Preferences dialog box and in various pop-up menus and Inspectors.)

To create a new page:

Choose File > New.

To rename a page:

•   Click the default page title Welcome to Adobe GoLive, and type your new title.

•   Type your page title in the Page tab of the Page Inspector, and press Enter.

The title you give your page here is what search engines use to index your pages. Also, this is what your viewers will see in the title bar of their browser window.

To set the opening view for new pages:

1  Choose Edit > Preferences, and click the General icon in the left pane of the Preferences dialog box.

2  Choose an option from the At Launch pop-up menu to customize Adobe GoLive behavior at launch time:

•   Create New Document opens an empty HTML page containing only the basic HTML, HEAD, and BODY sections.

•   Show Open Dialog prompts you to select an existing file.

•   Do Nothing opens Adobe GoLive without creating a new document or prompting you to select an existing file.

3  Choose an option from the Default Section (Windows) or the Default Mode (Mac OS) pop-up menu to select an opening default view for the document window. (See Changing document views for an explanation of document views.)

4  Select New Document. Click the Select button choose the default when you create a new document, or or when Adobe GoLive starts with the Create New Document option selected. Use this option to open a template and ensure consistency in you pages.

5  Select Write “Generator Adobe GoLive” to add the meta information tag <meta name="generator” content="Adobe GoLive 4"> to each file you create or save.

6  Click  OK.


Setting page size, background, and text color
Setting Up Pages

Setting page size, background, and text color

Once you have your Web page open, Adobe GoLive lets you select a default window size to visually limit the design area. Although many monitors have a visible display area greater than 640 pixels, you may want to limit the window size to 580 pixels or less to accommodate viewers with 14-inch monitors. Some designers choose 580 pixels because even viewers with larger monitors don’t necessarily like the browser to fill the entire screen.

See also:

To set the visual display area

To select a background image

To select a background color or text colors


To set the visual display area
Setting page size, background, and text color

To set the visual display area:

1  Choose a size from the pop-up menu in the lower right corner of the document window.

2  To make this size the default window size, choose Window Settings from the pop-up menu. Select HTML Windows, Site Windows, or both to set the size of your document and site windows. Click OK.

Note: The window setting is only valid for your own Web authoring sessions with Adobe GoLive; it doesn’t affect the window size in the viewer’s browser.

See also:

To select a background image

To select a background color or text colors


To select a background image
Setting page size, background, and text color

To select a background image:

1  With the Inspector open, click the Page icon ( [image]) in the upper left corner of the document window.

2  Select the Image check box, and then do one of the following:

•   Drag from the Point and Shoot button ( [image]) in the Page Inspector to an image file in the site window.

•   Click Browse to locate an image.

•   Enter an image pathname in the Image text box.

(For more information on the Point and Shoot button, see Using the Point and Shoot feature.

A. Click to open the Color Palette. B. Drag a color from the preview pane.

See also:

To set the visual display area

To select a background color or text colors


To select a background color or text colors
Setting page size, background, and text color

To select a background color or text colors:

1  With the Inspector window open, click the Page icon ( [image]) in the upper left corner of the document window.

2  In the Page Inspector, click a color field to open the Color Palette:

•   Use the Text option to select a color for the body text on your page.

•   Use the Link option to select a color for hyperlinks within the body text.

•   Use the Active Link option to select a color for hyperlinks when clicked.

•   Use the Visited Link option to select a color for hyperlinks already explored.

•   Use the Background color option to select a background color.

3  Drag the color from the preview pane to the text color field in the Page Inspector.

For instructions on using the Color Palette, see Adding color.

See also:

To set the visual display area

To select a background image


Customizing the screen display
Setting Up Pages

Customizing the screen display

You set the display attributes of your pages using the Layout View Controller and Display preferences. The choices you make in the Layout View Controller are temporary and specific to the open page in this session. Display preferences are persistent over each page until you change them.

See also:

To customize the screen display with the Layout View Controller

To customize the screen display using General Display preferences

Using layout rulers

Resizing objects


To customize the screen display with the Layout View Controller
Customizing the screen display

To customize the screen display with the Layout View Controller:

1  With the Inspector open, click the eye icon ( [image]) above the right scroll bar of the document window.

2  In the Layout View Controller, select Show Invisible Items to display line breaks, comment icons, and other invisible characters.

3  Select Show Link Warnings to show or hide broken links within your page. (This option is equivalent to the Link Warnings button ( [image]) in the toolbar and the Edit > Show/Hide Link Warnings command.)

4  Select Show Images to show images in Layout view.

5  With the Show Images option checked, select Show Low Source Images to display low-resolution images in Layout view.

6  Select Use Stylesheets, and choose an option from the Root pop-up menu to see how your page would appear in a browser. Deselect Use Stylesheets to see how your page would appear in a non-CSS browser.

7  Set the Styles options:

•   Choose an option from the Show Links pop-up menu to see how visited links will appear. This lets you preview how links display before and after they have been used.

•   Choose an option from the Mark Style pop-up menu to mark elements formatted with classes or IDs.

•   Choose an option from the Mark Tag pop-up menu to mark formatted tags. The Hide Marks button unmarks all marked tags.

For more information on CSS-related options, see Using Cascading Style Sheets.

See also:

To customize the screen display using General Display preferences

Using layout rulers

Resizing objects


To customize the screen display using General Display preferences
Customizing the screen display

To customize the screen display using General Display preferences:

1  Choose Edit > Preferences, and click the symbol next to General to expand the list.

2  Click Display, and set the desired options:

•   To select a custom color for CSS styles marked up using the Layout View Controller, click the Styles color field, select a color and click OK.

•   To select a background or outline color for broken links, click the Link Warnings color field, select a color and click OK.

•   Choose an option from the Frame Border pop-up menu to set the size of the color box that marks link warnings in the text or around images.

•   Choose display options for the resize handles (Sizeknobs) that appear on objects when they are selected (see Resizing objects). Click the color box to choose a new color for the handles.

•   On Mac OS, select Appearance Theme Savvy and Use Navigation Services to use these customized display features of Mac OS 8.5 and higher. See your Macintosh documentation for details on these features.

See also:

To customize the screen display with the Layout View Controller

Using layout rulers

Resizing objects


Using layout rulers
Customizing the screen display

Using layout rulers

The Layout view features top and left rulers with a pixel scale to help you place objects precisely. When you drag to resize or move an object on a layout grid, small lines in the vertical and horizontal rulers move to indicate the size and current position of the selected object.

To turn rulers on and off:

Click the ruler icon above the scroll bar to the right of the document window.

A. White area on either ruler indicates the size of the current object. Rulers scaled in pixels help you position objects on a layout grid. B. Click to turn rulers on and off.


Resizing objects
Customizing the screen display

Resizing objects

You can resize an object by dragging with the mouse. Adobe GoLive updates the display in real time.

To use interactive resizing with any object:

1  Control-drag any object handle to preview as you resize, or Control-Shift-drag a corner handle to preview and resize proportionally.

2  Adobe GoLive updates the display of the object’s content while you resize. In an HTML text environment, surrounding objects and text move away while you drag, maintaining spacing between objects.

You can return to nonvisual resizing by releasing the Control key as you drag.

You can return to nonproportional resizing by releasing the Shift key as you drag.

Nonvisual and visual resizing


Saving pages
Setting Up Pages

Saving pages

The Save dialog box contains a pop-up menu that lets you save your page directly in the site folder (or subfolders) representing the site window.

To save a page:

1  Choose File > Save.

2  Select a folder for the file. Use the site pop-up menu to choose a destination in your site folder. Unless you have a site window open at this point, you will not see the site pop-up menu in the Save dialog box.

3  Use the Text Encoding menu (Windows) or Encoding menu (Mac OS) to save your page in a different language encoding.

4  Name the page using the appropriate file naming conventions, and click Save. (For information on filenaming conventions, see Naming files.)


Naming files
Setting Up Pages

Naming files

All files for the Web require a DOS-style (three-character) or UNIX-style (four-character) file extension. Check with your Web master or Internet Service Provider (ISP) to see which is preferred.

•   Pages are usually .html (or .htm).

•   GIF images are usually .gif.

•   JPEG images are usually .jpg (or .jpeg).

Note: If you plan to transfer your site on a DOS-formatted floppy disk or removable disk, make sure you use the 8.3 DOS naming convention (eight characters for the filename and three characters for the filename extension). Versions of PC Exchange earlier than Mac OS 8.1 truncate filenames to the 8.3 format, which makes hyperlinks unusable.

In addition, follow these guidelines for naming Web pages:

•   You cannot use these characters in Web filenames: the forward slash (/), more than one period (the only period must be part of the extension, as in index.html), and the hyphen (-) as the first character in a filename. The backward slash (\), the plus sign (+), and the colon (:) should also be avoided.

•   Some webmasters also ban the use of spaces—the underscore character (_) is often used instead—and ampersands (&).

•   Web servers are usually configured to find a default page in a directory, which avoids the need to type the whole URL. In other words, typing in http://www.adobe.com is the same as typing in http://www.adobe.com/index.html, because the Web server has been configured to look for a page called index.html if no page is specified. Ask your Web master (or the Web master of your ISP) what naming convention your server uses.

•   Most Web servers are case-sensitive with respect to filenames, and some Web masters require that all filenames be in lowercase. Check which convention you need to follow before starting your site. (If you use the Browse button or the Point and Shoot button to make links, Adobe GoLive creates the link with the same case as your filename.)

•   Mac OS doesn’t recognize that a filename has changed when you change the case, because filenames aren’t case sensitive in Mac OS. For this reason, if you change the case of a filename in Mac OS, links to and from that file work in Mac OS, but not on the Web.

•   The General URL Handling preference option Check URLs Casesensitive tells Adobe GoLive to rewrite links with the matching case when the case of a filename is changed. To make sure this option is selected, choose Edit > Preferences, expand the General icon, and select URL Handling.


Adding HTML head tags
Setting Up Pages

Adding HTML head tags

HTML head tags store information that viewers need to find and use your site. The Head tab of the Palette contains a complete inventory of HTML tags.

Head tags can be used only in the head section pane of your document window. This head section pane contains the title tag, which you can edit directly by clicking the triangle next to the Page icon ( [image]) in your document window. The head section also contains invisible tags that provide document-related information to the Web browser.

To add head tags:

1  Click the triangle ( [image]) next to the Page icon ( [image]) in the document window to open the head section pane.

A. Collapsed head section  B. Opened head section

2  Click the Head tab of the Palette, and drag the desired icon from the Palette to the head section pane. If the head section is closed, you can drag an icon directly to the triangle. When the head section pane opens, you can then drag the icon into it.

See also:

Adding IsIndex tags

Adding Base tags

Adding Keywords tags

Adding Link tags

Adding Meta tags

Adding Refresh tags

Adding unknown tags

Adding Comment tags

Adding Script tags


Adding IsIndex tags
Adding HTML head tags

Adding IsIndex tags

The IsIndex icon inserts a tag that instructs the Web browser to add a search text box for a keyword search when the page is displayed.

Note: The IsIndex tag is obsolete; we do not recommend using it.

To add an IsIndex tag:

1  Drag the IsIndex icon from the Head tab of the Palette to the head section pane of your document window.

2  In the Prompt text box of the IsIndex Inspector, type in the string you want the Web browser to display with the search text box.


Adding Base tags
Adding HTML head tags

Adding Base tags

The Base icon inserts a tag that points to another document.

Note: The Base tag is obsolete; we do not recommend using it.

To add a Base tag:

1  Drag the Base icon from the Head tab of the Palette to the head section pane of your document window.

2  Set the options for the Base tag in the Base Inspector:

•   Select Base, and type in the URL for the referenced document. Click Browse to select a URL, or drag from the Point and Shoot button to link to a resource in the site window.

•   Select Write Base Always Absolute to let Adobe GoLive use absolute paths to the referenced document.

•   Choose a value from the Target pop-up menu, or type in a value to select the destination frame in a frame set.


Adding Keywords tags
Adding HTML head tags

Adding Keywords tags

The Keywords icon inserts a container tag for keywords that Web search engines can access.

To add a Keywords tag:

1  Drag the Keywords icon from the Head tab of the Palette to the head section pane of your document window.

2  Set the options for the Keywords tag in the Keywords Inspector:

•   In the text box below the scrolling window, type in a keyword. Click Add, or press Enter to add the keyword to your page header and the list box.

•   Select an existing keyword, and click Delete to delete the keyword.

•   Select and edit an existing keyword, and click Update to save the changes.

3  Select a word in your document, and choose Special > Add to Keywords. This command lets you insert a keyword tag with a single keyword or add keywords to an existing tag.


Adding Link tags
Adding HTML head tags

Adding Link tags

The Link icon inserts a comment tag that defines the relationship between the current document and other documents. This allows Web authors to track links between files in large Web sites. (You don’t need to use the Link tag if you manage your pages in the Adobe GoLive site window.)

To add a Link tag:

1  Drag the Link icon from the Head tab of the Palette to the head section pane of your document window.

2  Set the following Link attributes in the Link Inspector:

•   Use the Point and Shoot feature to select a link.

•   Use the Browse button to select the file.

•   Type in the destination or source URL in the URL text box.

•   In the Title text box, type in the title of the referenced or referencing document.

•   In the Name text box, type in the name of the link or anchor.

•   In the URN text box, type in a Uniform Resource Number for your document.

Note: URNs are neither used nor supported currently.

•   In the Methods text box, type in a list of HTTP methods supported by the object.

Note: The Methods attribute is seldom used or supported.

•   In the REL text box, type in a description of the relationship between the current page and the source or destination URL. For example, if the home page references the current page, type in “follows”.

•   In the REV text box, type in a description of the (reverse or opposite) relationship between the source or destination URL and the current page.


Adding Meta tags
Adding HTML head tags

Adding Meta tags

The Meta icon inserts a tag that lets you include specialized information, such as the physical location of your page.

Adobe GoLive automatically includes certain meta information in the head section:

•   The file format; for example, text/HTML.

•   The character set used; for example, iso-8859-1.

•   The file creator, Adobe GoLive.

To add a Meta tag:

1  Drag the Meta icon from the Head tab of the Palette to the head section pane of your document window.

2  From the pop-up menu in the Meta Inspector, choose the meta data to transmit:

•   HTTP-Equivalent to instruct the HTTP server to transmit the HTTP header field specified in the single-line text box with the content of the Content text box. Then type in the name of the HTTP header field that you want to send along with the page.

•   Name to define a non-HTTP meta tag for your head section and send other meta data—for example, Author or Copyright. Then type in the special information that you want to send along with your page.

3  Type the meta information in the large text box.

You can add other meta tags if you want to include additional document-related information.


Adding Refresh tags
Adding HTML head tags

Adding Refresh tags

The Refresh icon inserts a tag that instructs the Web browser to update the display at nondefault intervals, overriding the browser’s preferences. Use this tag if your page contains live material or you want to present a slide show to your audience. This can also jump to another page on the main path of the site.

To add a Refresh tag:

1  Drag the Refresh icon from the Head tab of the Palette to the head section pane of your document window.

2  In the Delay text box of the Refresh Inspector, type in a value (in seconds) for the refresh interval.

3  In the Target section, select what to refresh:

•   This Document refreshes the current document.

•   URL replaces the initial page with a new one specified in the URL box. Type a URL or use the Browse button or Point and Shoot button to select a page. You can repeat the Refresh tag in the head of the new page to jump to a third page or return to the first page. This is useful, for example, for a slide-show presentation.


Adding unknown tags
Adding HTML head tags

Adding unknown tags

Adobe GoLive lets you insert unknown start (Tag) and end (Endtag) tags to ensure compatibility with future revisions of the HTML standard and upcoming Web browsers. You need to create an end tag only if your unknown start tag requires a closing tag.

See also:

To add an unknown start tag

To add an unknown end tag


To add an unknown start tag
Adding unknown tags

To add an unknown start tag:

1  Drag the Tag icon from the Head tab of the Palette to the head section pane of your document window.

2  Type the name of the new tag in the Tag Name text box of the Tag Inspector, and press Enter.

3  Click New to add a new attribute. (This activates the text boxes below the list field.)

4  Enter an attribute name and value in the list boxes, and press Enter after each entry.

To rename an existing tag or edit a tag attribute, edit the name in the Tagname text box or edit the desired attribute in the list field. To remove the currently selected attribute, click Delete.

Note: When you rename a tag, don’t forget to edit any corresponding end tag.

See also:

To add an unknown end tag


To add an unknown end tag
Adding unknown tags

To add an unknown end tag:

1  Drag the Endtag icon from the Head tab of the Palette to the head section pane of your document window.

2  Set the options for the Endtag in the End Tag Inspector.

See also:

To add an unknown start tag


Adding Comment tags
Adding HTML head tags

Adding Comment tags

The Comment icon inserts a tag that lets you add hidden comments in the head section. This allows you to include publishing information for future reference, for example. A Web page editor, such as Adobe GoLive, is necessary to view comments.


Adding Script tags
Adding HTML head tags

Adding Script tags

The Script icon inserts a tag that lets you add a JavaScript to the head section of your document. This allows a script to be executed while the visible body section of the document is still being loaded.

For information on JavaScript and the Script Editor, see Adding Interactivity with JavaScript, Java Applets, and Plug-ins.

To add a script:

1  Drag the Script icon from the Head tab of the Palette to the head section pane of your document window.

2  Type in a name in the Head Script Inspector.

3  Select a JavaScript dialect from the Language pop-up menu.

Select a JavaScript dialect from the pop-up menu.

4  Select Source and type in the resource locator of an existing script, or use the Browse button or the Point and Shoot button to select a script.

5  Click Edit to open the Script Editor and start scripting.

6  Select Absolute to convert the path of the referenced script file to an absolute path. See Setting up absolute paths.


Working with nonroman character sets
Setting Up Pages

Working with nonroman character sets

Your ability to switch between roman and nonroman character sets depends on your operating system.

In Windows, you cannot directly create nonroman (double-byte) Web pages using a roman (single-byte) operating system. However, you can import double-byte HTML files created with another operating system. You can then view the HTML source code in Adobe GoLive, although the double-byte text does not display correctly in Layout or Preview view. Internet Explorer 4.0 is able to display double-byte scripts, so you can preview double-byte files by using the Show in Browser command.

The Apple 8.5 operating system includes Multilingual Internet Access as an optional installation. This software lets Adobe GoLive display double-byte scripts, even without the native operating system. See your system documentation for further information.

See also:

Using double-byte text in Adobe GoLive (Mac OS only)

Setting language and font preferences

Using text files containing different scripts and encodings


Using double-byte text in Adobe GoLive (Mac OS only)
Working with nonroman character sets

Using double-byte text in Adobe GoLive (Mac OS only)

When you install the English version of Adobe GoLive, any page you create defaults to the CS-Western (Latin 1) encoding. If the text on your pages is created using any Western language, such as U.S. or British English, German, French, Spanish, or Swedish, you do not need to change this selection. You can type text directly in the document window. But to create content in a language with a different script system, you need the appropriate foreign-language script operating system software and fonts. The CS Encoding Module and the Mac OS Encoding Module must both be installed and active. You must also change the General Encodings preference setting to the encoding you want to use so that the foreign-language encoding appears in the Document Encoding submenu.


Setting language and font preferences
Working with nonroman character sets

Setting language and font preferences

The Encodings and Fonts preferences settings let you select a default language script, customize the Document Encoding submenu, and set default fonts.

See also:

To activate encodings

To select default fonts for an encoding system

To create foreign-language pages


To activate encodings
Setting language and font preferences

To activate encodings:

1  Choose Edit > Preferences, and click the Modules icon in the left pane. Check to see if the StdEncodings and the CJKEncodings (Windows) or the CS Encoding and Mac OS Encoding (Mac OS) Modules are selected. If they were not selected, you must select them, click OK, and restart GoLive to initialize them.

2  Choose Edit > Preferences, and click the Encodings icon.

3  Select the desired encoding option. Encodings that are not activated do not appear in the File > Document Encoding submenu.

4  To make an encoding option the default, select the name of the option, and then select Default Encoding, or simply double-click the option name. The name of the default selection appears in boldface and underlined.

5  Select Use Charset Info to include the encoding and character set information in the Content attribute of the Meta tag. When this option is selected GoLive tries to recognize the encoding based on the characters used. Deselect this option to eliminate language information from the HTML page header.

6  The Scanning Limit ___ Characters text box defines the number of bytes you want Adobe GoLive to search in order to find encoding and character set information when it opens a file. Deselect Use Charset Info to turn off this text box automatically.

See also:

To select default fonts for an encoding system

To create foreign-language pages


To select default fonts for an encoding system
Setting language and font preferences

To select default fonts for an encoding system:

1  Choose Edit > Preferences, and click the Fonts icon in the left pane of the dialog box.

2  Select the desired font.

3  For each script, choose a font and size from the Font and Size pop-up menus.

To preview your selection, click the Font Sample triangle (Mac OS).

A. Click this icon to view the fonts for the encoding system. B. Click this triangle to show and hide the font sample (Mac OS).

4  Click OK, and quit or restart GoLive.

Note: Only installed foreign-language fonts appear in the Font pop-up menu. See your operating system documentation for information on installing fonts.

See also:

To activate encodings

To create foreign-language pages


To create foreign-language pages
Setting language and font preferences

To create foreign-language pages:

1  If you are creating text in a non-Western foreign language, make sure that you have installed the appropriate foreign-language script system software and fonts.

2  Open a new document window.

3  Choose File > Document Encoding, and choose the appropriate language encoding option.

Be sure that it is equivalent to the internal operating system encoding—for example, Japanese (Shift JIS)—to add that meta information to the header section.

4  Proceed to create your page in the normal Adobe GoLive manner.

See also:

To activate encodings

To select default fonts for an encoding system


Using text files containing different scripts and encodings
Working with nonroman character sets

Using text files containing different scripts and encodings

Before importing foreign-language files or text files from other platforms, you need to know what encoding they were written with. If the text was saved in an encoding not recognized by your operating system, it will not display properly. However, the HTML code is still valid. To insert foreign script, you must open the Source tab of your Adobe GoLive document, and paste the double-byte text into it.

To import foreign encoded text files:

1  Open a new document window.

2  Choose File > Document Encoding, and choose the language encoding used to create the file you want to import.

This inserts the encoding information in the head.

3  Copy the text from the file you want to import.

4  Return to Adobe GoLive, and open the Source Editor.

5  Paste the copied text between the <body> and </body> tags. Be sure you do not type over any of the HTML tags.

If your text contains characters that are used in HTML syntax, such as “<”, “>”, and “&”, you must use the proper HTML notation for special characters, such as “&lt;”, “&gt;”, and “&amp;”; otherwise Adobe GoLive interprets them as HTML tags when it reads the text-only file.

You now have an Adobe GoLive HTML file with the proper encoding in the head, and the text you want to use.

6  Choose File > Save As to save the page with the .html extension after the filename.

7  Proceed to lay out your page.

The text will not display properly without the necessary operating system and fonts. To preview the page you must use a browser with the correct encoding running on the necessary operating system.

Note: Switching encodings while in Source view in the document window changes the character set information, not the encoding information, for the current page.


Adding Content

Using the layout grid

Aligning and distributing objects on a layout grid

Creating text

Formatting paragraphs

Adding horizontal lines

Adding spacers

Creating tables

Adding images

Adding color

Adding links

Previewing pages

Viewing document information

Spellchecking text

Editing a personal dictionary

Searching within a document and within a site


Using the layout grid
Adding Content

 Using the layout grid

You can add text and graphics directly to your page so that it reflows according to your viewer’s browser settings. However, if you want the text and graphics to maintain their positions regardless of browser settings, use the layout grid to position text and objects on your page. Using the layout grid ensures that the viewer sees your layout as you intended it to look.

Important: If you use the layout grid to design your page, your viewer’s Web browser must support tables. HTML table support is now standard in most Web browsers. Obsolete browsers, such as Netscape Navigator 2, have problems displaying some tables accurately.

To set up a layout grid:

1  Drag the Layout Grid icon from the Basic tab of the Palette into your document window, or double-click the icon in the Palette.

Note: Adobe GoLive inserts a <SPACER> tag in the HTML table that constitutes the layout grid. This tag resolves a bug in Netscape browsers that causes a rounding of table widths; Microsoft Internet Explorer ignores this tag. As a result, your HTML code displays properly in all browsers.

2  Do one of the following to size the layout grid:

•   Click the edge of the grid to display the resize handles, and drag the handles to resize.

•   In the Layout Grid Inspector, enter the appropriate size for Width and Height. Press Enter.

•   If you have already placed items on the layout grid, click Optimize in the Layout Grid Inspector to auto-resize the layout grid.

To minimize page scrolling in a viewer’s Web browser, keep the grid width no larger than the dimensions of a standard 14-inch monitor.

Select a handle, and drag in the desired directionto resize the grid.

3  To adjust the grid settings in the Layout Grid Inspector, do any of the following:

•   In the Horizontal or Vertical text box, enter the spacing you want (in pixels) between the horizontal or vertical lines of the grid. Press Enter.

•   Select Snap (for the horizontal grid lines, vertical grid lines, or both) to make objects snap to the grid lines. Deselect this option if you want to be able to position objects freely on the grid.

If snap to grid is selected and you want to move a selected object pixel by pixel, press Ctrl-Alt+arrow key (Windows) or Option+arrow key (Mac OS). Conversely, if snap to grid is deselected and you want to move a selected object in grid increments, press Ctrl-Alt+arrow key (Windows) or Option+arrow key (Mac OS).

•   Select Visible to display the horizontal or vertical grid lines, or both. Deselect this option to hide the grid lines.

Hide the grid lines to speed previewing in Layout view. The grid is still active when hidden.

4  Choose an option from the Align pop-up menu to determine the position of the grid relative to the document window. Default uses the settings of the surrounding HTML container to align the layout grid.

5  Choose a background color, as described in Setting page size, background, and text color.


Aligning and distributing objects on a layout grid
Adding Content

Aligning and distributing objects on a layout grid

You use the Adobe GoLive toolbar buttons to align objects on the layout grid. You use the Multiselection Inspector to align or distribute objects relative to each other.

See also:

To align objects on the layout grid

To align or scale objects relative to each other on the layout grid

To distribute objects on the layout grid


To align objects on the layout grid
Aligning and distributing objects on a layout grid

To align objects on the layout grid:

1  Select the object or objects you want to align. Shift-click to select multiple objects on a page.

2  Click the desired alignment option in the toolbar.

Note: Because Adobe GoLive does not move a selected object if another object is in the way, different alignment buttons are dimmed (inactive) depending on the objects selected.

See also:

To align or scale objects relative to each other on the layout grid

To distribute objects on the layout grid


To align or scale objects relative to each other on the layout grid
Aligning and distributing objects on a layout grid

To align or scale objects relative to each other on the layout grid:

1  Select two or more objects on the grid. (Shift-click to select additional objects.)

2  In the Alignment tab of the Multiselection Inspector, choose an alignment option:

•   Select a horizontal alignment button to align the objects along the left or right vertical axis of the object closest to the corresponding edge of the grid, or along the central axis.

•   Select a vertical alignment button to align the objects along the top, bottom, or center axis.

A. Align Left, Align Center, and Align Right B. Align Top, Align Center, Align Bottom

3  Select Same Size to scale all objects to the size if the first selected object.

See also:

To align objects on the layout grid

To distribute objects on the layout grid


To distribute objects on the layout grid
Aligning and distributing objects on a layout grid

To distribute objects on the layout grid:

1  Select three or more objects on the grid.

2  In the Special tab of the Multiselection Inspector, do one of the following:

•   Select Distribute, and choose the Horizontal or Vertical Equidistant Edges button (the buttons on the far left) to average the distance between the horizontal or vertical edges of the objects. The other buttons are not active when Distribute is selected.

Randomly arranged icons are distributed evenly using the Equidistant Edges buttons.

•   Select Offset, enter the desired distance between the objects, in pixels, and click the desired Distribute button to align the objects according to their edges.

A. Relative to Left Edges, Relative to Vertical Centers, Relative to Right Edges, Equidistant Edges B. Relative to Top Edges, Relative to Horizontal Centers, Relative to Bottom Edges, Equidistant Edges

See also:

To align objects on the layout grid

To align or scale objects relative to each other on the layout grid


Creating text
Adding Content

Creating text

With text, Adobe GoLive behaves very much like any popular word-processing program. You can type in text directly, import text from another application by copying and pasting or dragging and dropping, and use traditional formatting, spellchecking, and search and replace tools.

You can add text directly to a document window or to text frames on a layout grid. Using text frames lets you rearrange your page layout more easily, because you can select the frames and drag the text anywhere on the page. As you type in text, text frames and the underlying layout grid grow.

To add a text frame on a layout grid:

1  Create a layout grid, and resize it as needed, as described in Using the layout grid.

2  Drag the Layout Text Box icon from the Basic tab of the Palette to the grid, or double-click the icon in the Palette.

3  Select the text frame, and drag the handles to resize it as needed.

4  Change the background color of the text frame, as described in Adding color.

To add text directly to a page or frame:

Do one of the following:

•   Click inside the window or text frame, and begin typing.

•   Select text in any application, and drag it into the Adobe GoLive document window or textframe (Mac OS).

•   Select text in any application, and copy and paste it into the Adobe GoLive document window or text frame.

Text frames automatically resize to accommodate inserted text.

See also:

Formatting text

Formatting text using structural tags

About font sizes across platforms

Choosing a font set


Formatting text
Creating text

 Formatting text

You format text using either the buttons on the toolbar or the commands in the Style menu.

To format text using the toolbar:

1  Drag to select the text you want to format.

2  Click a style button to format the text as boldface ( [image]), italic ( [image]), or monospaced teletype ( [image]).

3  Choose a relative font size from the Font Size pop-up menu. For more information, see About font sizes across platforms.

To format text using the Style menu:

1  Drag to select the text you want to format.

2  Choose a visual style from the Style menu, or choose a structural style from the Style > Structure submenu. For more information on structural tags, see Formatting text using structural tags.


Formatting text using structural tags
Creating text

Formatting text using structural tags

While visual styles make individual words or phrases stand out from the surrounding text, structural character styles classify items of information. Identifying text structurally formats it using the conventions of the browser or style sheet applied.

The Style > Structure submenu includes the following options:

•   Plain Structure—Removes all existing logical styles.

•   Emphasis—Italicizes text.

•   Strong—Displays text in boldface.

•   Quotation—Identifies text taken from another source. Most browsers use smaller font size and italics for quotations.

•   Sample—Indicates text from another source used as a sample to demonstrate a given property. Most browsers use a monospaced font for samples.

•   Definition—Identifies text as a definition. Most browsers use plain text for definitions.

•   Variable—Establishes a variable name within a block of program code. Most browsers use italics for variables.

•   Code—Identifies computer program code. Most browsers use a monospaced font for code.

•   Keyboard—Denotes text to be typed. Most browsers use a monospaced font for keyboard entries.

Note: Older browsers may not support character styles other than the basic set, such as plain, boldface, and italic. Also, Adobe GoLive does not preview the Netscape Blink style; you must start your Netscape browser to preview this effect.


About font sizes across platforms
Creating text

About font sizes across platforms

The browser, not the Web page author, controls font sizes on the Web. Some viewers have their browser configured to display text at 9 points, while others have their browsers configured to display text at 14 or even 18 points. The relative size settings you choose have the following effects:

•   HTML size 3 displays text at the size set in the browser’s preferences.

•   HTML size 2 displays text one font size smaller than the size set in the browser’s preferences.

•   HTML size 4 displays text one font size larger than the size set in the browser’s preferences.

Most viewers probably have their browsers configured to display text at 12-point Times. However, fonts on Windows are about one step larger than on Mac OS, due to the difference in pixel resolution between platforms.

Because of the uncertainty over the font size being viewed, you need to design your page to handle a range of font sizes. Internet Explorer on Mac OS provides the easiest way to proof your pages at a variety of font sizes. It has a Font Larger/Smaller button in its toolbar that lets you easily change font sizes. (In Netscape Navigator, you must change the default font size in the preferences.)

Use the following design guidelines for handling a range of font sizes:

•   Do not mix header styles with relative font sizes. Relative font sizes can cause headers to wrap and adversely affect your layout.

•   Layout grid text frames lengthen as the text grows so that text isn’t cut off. Graphics and other objects below them are pushed down.

•   Layout grid text frames do not shrink if the text is viewed at a smaller font size than you used for the page layout. This can leave space between the text and graphics below the text.

•   You can place graphics (or even small layout grids) inside a layout grid text frame so that the graphics move up and down as the text resizes.

•   Set the Adobe GoLive default font size to 9 or 10 points. This reduces the chance that viewers have their browsers set to a smaller font size. In the Encodings Preferences dialog box, choose the default CS-Western (Latin 1) encoding, and then in the Fonts Preferences dialog box, change the Proportional font size.

•   Sometimes, using a simple table is the best solution to keeping graphics and text aligned together. Put the text in one cell and the graphic in another. At any displayed font size, the text and graphics stay together. You can use tables on top of a layout grid or by themselves.


Choosing a font set
Creating text

Choosing a font set

Adobe GoLive lets you store font sets with each page. Based on the FACE attribute of the FONT tag, a font set adds a list consisting of one or more font names to the currently selected text. If the first font on the list is available on the viewer’s system, it is used to display the formatted text. If not, the second font is used, and so on. If none of the fonts on the list is available, the text appears in the default font of the Web browser.

The Style > Font menu lists all font sets available for the current session. The choice of font sets varies with the availability of the source windows: global font sets are displayed by default, while font sets used in individual pages or stored in the site window appear only when their parent windows are open.

See also:

To format text using a font set

To add or edit font sets


To format text using a font set
Choosing a font set

To format text using a font set:

1  Select the desired text.

2  Choose Style > Font, and choose the desired font set.

•   Listed below the first separator are both the global font sets managed by the application and the font sets from open pages.

•   Listed below the second separator are the font sets from open site windows.

See also:

To add or edit font sets


To add or edit font sets
Choosing a font set

To add or edit font sets:

1  Choose Style > Font > Edit Font Sets.

2  Do one of the following:

•   To add a global font set that you can use in any page, choose Default Font Sets from the Font Sets pop-up menu (Windows) or click the Default icon in the leftmost pane of the Font Set dialog box (Mac OS).

•   To add a font set to use on the current page only, choose Page Font Sets from the Font Sets pop-up menu (Windows) or click the Page icon in the leftmost pane of the Font Set dialog box (Mac OS).

3  Click New below the Font Sets list to add a new font set to the list.

4  Click New below the Font Names list, and then choose a font from the pop-up menu below the Font Names list. You can enter the font name in the text box if the font is not installed in your system. Include additional fonts in the font set.

Note: Adobe GoLive font sets are always named according to the first font they contain. The name can be changed in the Font Set Inspector.

5  To change a font within a font set, select the font you want to edit in the Font Names list, and choose a new font from the pop-up menu below the list. If you have selected the first font in a font set, the font set is renamed accordingly in the Font Sets list.

6  To delete a font from a font set, select the font you want to delete in the Font Names list, and click Delete.

7  Click OK.

See also:

To format text using a font set


Formatting paragraphs
Adding Content

Formatting paragraphs

You format paragraphs using the toolbar or the commands in the Format menu.

See also:

To apply a paragraph style

To align paragraphs

To suppress text wrapping

To format a list

To format a list hierarchically


To apply a paragraph style
Formatting paragraphs

To apply a paragraph style:

1  Click anywhere in the paragraph you want to format, or drag to select multiple paragraphs.

2  Choose a style from the Format menu or from the Paragraph Format pop-up menu in the toolbar:

•   Header 1 through Header 6 applies one of the six hierarchical levels of headings to the current paragraph.

•    Address applies the default HTML style for the author’s e-mail address to the current paragraph.

•    Preformatted applies the default style that displays HTML code to the current paragraph.

•   None resets the current text to the default style selected in the browser’s Font preferences.

See also:

To align paragraphs

To suppress text wrapping

To format a list

To format a list hierarchically


To align paragraphs
Formatting paragraphs

To align paragraphs:

1  Click anywhere in the paragraph you want to align, or drag to select multiple paragraphs.

2  Choose Format > Alignment, and choose an alignment option from the submenu; or click an alignment option in the toolbar:

•   Default Alignment specifies that the paragraph shouldn’t have an alignment, or it removes an existing alignment.

•   Increase/Decrease Block Indent incrementally increases or decreases the space between the paragraph and its right and left margins.

Unindented paragraph

Block indented paragraph

See also:

To apply a paragraph style

To suppress text wrapping

To format a list

To format a list hierarchically


To suppress text wrapping
Formatting paragraphs

To suppress text wrapping:

1  Select the words you want to keep on the same line.

2  Choose Style > Nobreak.

To insert a forced line break:

1  Drag the Line Break icon from the Basic tab of the Palette to where you want the line to break, or press Shift-Enter while typing text.

2  To control how text breaks around an adjacent object, select Clear in the Line Break Inspector, and choose an option from the pop-up menu:

•   Left and Right move the line after the break below the bottom of a left-aligned or right-aligned object.

•   All moves the line after the break below the bottom of a right-aligned or left-aligned object spanning the current line.

Note: The floating object must be right-aligned or left-aligned for the Clear attribute to work as expected in an HTML text flow.

See also:

To apply a paragraph style

To align paragraphs

To format a list

To format a list hierarchically


To format a list
Formatting paragraphs

To format a list:

1  Select the paragraphs you want to format.

2  Choose Format > List, and choose an option from the submenu; or click a list format button in the toolbar.

Buttons in the toolbar: A. Numbered List B. Unnumbered List C. Increase List Level D. Decrease List Level

See also:

To apply a paragraph style

To align paragraphs

To suppress text wrapping

To format a list hierarchically


To format a list hierarchically
Formatting paragraphs

To format a list hierarchically:

1  Select the paragraphs you want to format.

2  Choose Format > List, and choose a list level option; or click the corresponding button in the toolbar. Increase List Level nests the selected paragraphs one level down in the hierarchy; Decrease List Level moves the paragraph up one level in the hierarchy.

Choosing Decrease List Level for a first-level item removes the list style and resets the paragraph to plain style.

In hierarchical lists, Adobe GoLive automatically assigns adifferent leading character to lower-level items.

See also:

To apply a paragraph style

To align paragraphs

To suppress text wrapping

To format a list


Adding horizontal lines
Adding Content

Adding horizontal lines

Adobe GoLive lets you insert horizontal lines, also called rules, to help you add visual separators to your pages.

To set up a horizontal line:

1  Drag the Line icon from the Basic tab of the Palette to your layout grid or document window, or double-click the icon.

Note: For best results, you should always place horizontal lines in text frames, rather than dropping them directly onto the layout grid.

2  Drag the line to the desired location on the layout grid, or use the Line Inspector to align it if you are not using a layout grid.

3  On the layout grid, resize the line by dragging its handle; or use the Width and Height options in the Line Inspector:

•   Full extends the line across the entire width of the layout grid or document window.

•   Percent lets you enter the width relative to the width of the layout grid or document window.

Drag the handle to resize the line.

4  To choose a three-dimensional or solid line style, click a line style button in the Line Inspector.

5  Click the Left ( [image]), Center ( [image]), or Right Alignment button ( [image]) in the Line Inspector. (This option is dimmed if the line is full width.)


Adding spacers
Adding Content

Adding spacers

Spacers help you structure your page layout by creating a user-resizable white space between text and objects. In pages designed for Netscape Navigator, spacers are particularly useful when you are working without the layout grid and want more control over your layout.

Important: Spacers are based on a Netscape-specific tag that works with Navigator 3.0 or later versions but is ignored by Microsoft Internet Explorer.

Horizontal spacers used to position text.

To insert a spacer:

1  Drag the Horizontal Spacer icon from the Basic tab of the Palette to your document window.

2  In the Spacer Inspector, click the desired spacer style button.

3  To resize the spacer, select the spacer and drag a handle, or enter the desired measurements in the Spacer Inspector and press Enter.

Drag a handle to resize the spacer.

To align a block spacer with surrounding text:

Select the spacer, and choose an option from the Align pop-up menu in the Spacer Inspector. For more information, see  Aligning images with text.


Creating tables
Adding Content

Creating tables

Adobe GoLive supports multicolumn, multirow tables that help you present information in spreadsheet form using, for example, data exported by spreadsheet applications.

You can insert a table using drag-and-drop or by double-clicking the Table icon in the Basic tab of the Palette. After inserting a new table, you can change its appearance, resize the entire table or individual rows and columns, add color, select the alignment of objects within cells, and import tab-separated data from text files.

Note: You can insert almost any element of information in tables, from text and images to QuickTime movies. However, positioning objects with tables is a tedious process that you can accomplish more easily using the Adobe GoLive unique layout grid feature (see Using the layout grid).

See also:

To set up a table

To customize the appearance of a table

To customize rows and cells

Making selections within a table

Importing data into a table

Adding and manipulating text in tables

Working with nested tables


To set up a table
Creating tables

To set up a table:

1  Drag the Table icon from the Basic tab of the Palette into your document window or layout grid, or double-click the icon in the Palette.

2  To resize the table, row, or column, do one of the following:

•   Alt-click (Windows) or Option-click (Mac OS) the right or bottom border of the table or cell, and then drag in the desired direction. (Alt-clicking or Option-clicking sets the table units from Auto to Pixels so it can be resized.)

•   Under the Table, Row, or Cell tab of the Table Inspector, choose Pixels, Percent, or Auto from the units pop-up menu, enter the desired measurements, and press Enter. (Auto is an HTML attribute that allows adjustment to the optimal size.)

3  To change the number of rows or columns, enter the desired number of rows and columns in the Table Inspector, and press Enter.

To add and delete rows and columns:

1  With a cell highlighted in the Layout view, click the Cell tab of the Table Inspector.

2  Click the Add Row button to add an empty row above the current selection.

3  Click the Add Column button to add an empty column to the left of the current selection.

A. Add Row button B. Delete Row button C. Add Column button D. Delete Column button

See also:

To customize the appearance of a table

To customize rows and cells

Making selections within a table

Importing data into a table

Adding and manipulating text in tables

Working with nested tables


To customize the appearance of a table
Creating tables

To customize the appearance of a table:

1  Select the table.

2  In the Table Inspector, enter the desired border width, and press Enter. Setting the border to 0 hides the borders in the browser. (The borders are dimmed in the Layout view.) You can hide the thin gray table separators temporarily by choosing Edit > Hide Invisible Items.

3  To add or reduce extra vertical spacing within cells, enter a number in the Cell Pad text box.

4  To add or reduce space between cells, enter a number in the Cell Space text box. The default spacing is 2 pixels.

5  Select an option from the Alignment pop-up menu to align the table with respect to the document window. (This option does not work with the layout grid.) Default aligns the table automatically, based on the alignment of the surrounding text.

6  Select Caption and a location to enter a caption above or below the table.

See also:

To set up a table

To customize rows and cells

Making selections within a table

Importing data into a table

Adding and manipulating text in tables

Working with nested tables


To customize rows and cells
Creating tables

To customize rows and cells:

1  Select a cell. Click the Row tab in the Table inspector to modify the cell’s row; click the Cell tab to modify the cell.

2  To extend the cell over multiple adjacent rows or columns, enter the desired number of rows or columns in the Row Span or Column Span text box, and press Enter.

A cell spanning three rows

3  To adjust the height or width, select Pixel or Percent from the Height or Width pop-up menu, and enter the desired measurement. Auto sets the height or width automatically according to the contents of the cell and various table settings.

4  Modify the cell or row background color using the instructions for Adding color.

 To convert a table to a layout grid with text frames for each table cell:

With the table selected, click the Convert button in the Table Inspector.

Note: You get a text box only for cells that contain data.

See also:

To set up a table

To customize the appearance of a table

Making selections within a table

Importing data into a table

Adding and manipulating text in tables

Working with nested tables


Making selections within a table
Creating tables

Making selections within a table

Adobe GoLive lets you select multiple cells in a table and apply colors, font sets, and relative font sizes, even if the cells within the selection are not adjacent.

You must first select cells in a table or the entire table, and then you can apply the table editing commands from the Table, Row, and Cell tabs of the Table Inspector, or you can apply formatting using the toolbar. For example, you can align the contents of a cell using cell formatting in the Inspector or text formatting on the toolbar. To avoid unexpected results when the table is viewed in a browser, be sure to use the same formatting method throughout a table. Mixing formatting methods can lead to unpredictable results.

To select contiguous cells of a table:

•   To select the entire table, click either its top or left edge.

•   To select a cell, click the bottom or right edge of the cell.

•   To select multiple cells, Shift-click the bottom or right edges of adjacent table cells successively.

•   To select all table cells, click the bottom or right edge of any cell, and then choose Edit > Select All.

Note: Adobe GoLive deactivates some options in the Table Inspector, depending on your selection. For example, if you select the two adjacent cells, Column Span is deactivated in the Cell tab because column spanning doesn’t require making a selection.

To select noncontiguous cells in a table:

•   Shift-click a cell to add it to the current selection. Shift-click the cell again to deselect it.

•   Shift-click the top of a column to select the entire column. Shift-clicking the top of a column inverts an existing selection. This action deselects previously active cells and selects previously inactive cells.

Shift-click the top of the column to invert a selection.

•   Shift-click the left side of a row to select the entire row. As is the case with cells and columns, rows need not be adjacent to be selectable.

•   Shift-click the left side of a row to invert the selection when cells are already selected in that row. As with columns, this action deselects previously active cells and selects previously inactive cells.


Importing data into a table
Creating tables

Importing data into a table

Adobe GoLive lets you easily import data from spreadsheet or database applications, allowing you to add content to a table without typing in or copying and pasting data from other programs. The Import Tab-Text feature on the Table tab of the Table Inspector accepts any text-only file containing tab-separated data in a “single line per record” format. Almost any spreadsheet or database application can output this format.

To import spreadsheet data:

1  In your spreadsheet or database application, make sure you have a text file with the required tab-separated data in place.

2  In Adobe GoLive, insert a table into your page.

3  Click the top or right border of the table to select it.

4  In the Table Inspector, click Browse next to the Import Tab-Text feature.

5  Select the text file, and specify a column separator for the file to be imported (options include tabs, commas, semicolons, and spaces). Click Open.

6  Adobe GoLive starts importing and adds as many columns and rows to the table as are necessary to accommodate the data.

7  Resize the columns as needed, and add optional formatting.


Adding and manipulating text in tables
Creating tables

Adding and manipulating text in tables

You can add text by typing, by cutting and pasting, or by dragging and dropping.

To type text into a cell:

1  Click in the center of the desired cell. A blinking text cursor appears, indicating that the cell is ready to accept your input.

2  Start typing.

To move text between cells:

1  Double-click to select the desired cell text.

2  Drag the text to the destination cell.


Working with nested tables
Creating tables

Working with nested tables

Adobe GoLive lets you nest tables by placing other tables in cells. The deeper you nest tables—especially if the border, cell padding, and cell spacing attributes are set to zero—the harder it is to select a table within a table. To make it easier for you to see how tables are nested, Adobe GoLive provides a shortcut for selecting nested tables.

To select nested tables:

1  Click in a cell within the innermost table.

2  Press Ctrl+Enter (Windows) or Ctrl+Return (Mac OS) to select the cell.

3  Press Ctrl+Enter (Windows) or Ctrl+Return (Mac OS) again to select the innermost table.

4  Press Ctrl+Enter (Windows) or Ctrl+Return (Mac OS) again to select the cell that encloses the innermost table.

5  Continue pressing Ctrl+Enter (Windows) or Ctrl+Return (Mac OS) to select the next parent table and cell until you’ve selected the outermost table.


Adding images
Adding Content

Adding images

When you add an image to a Web page, Adobe GoLive creates a reference from the HTML page to the image. Adobe GoLive supports GIF, GIF89a for transparent images, JPEG, Progressive JPEG, and PNG images. It automatically converts Windows bitmap files and Macintosh PICT and TIFF files imported via drag-and-drop.

To insert an image:

1  Drag the Image icon from the Basic tab of the Palette into your document window, or double-click the icon in the Palette.

2  Select the image placeholder, and click Browse in the Image Inspector window.

3  Select the desired graphic file, and click Open.

You can also select an image by dragging from the Point and Shoot button ( [image]) to an image file in the site window or by dragging and dropping an image from the site window. (For more information, see Adding links.)

If Link Warnings is selected, a broken link appears as a question mark icon with a red border. Empty References result when you select an image or piece of hypertext and click New Link ( [image]) in the toolbar but fail to define the destination URL. See Setting link warnings for more information.

See also:

Importing and previewing images with drag-and-drop

About image formats

Simulating Windows gamma in Mac OS

Adjusting image size

Aligning images with text

Additional image options

Setting image preferences


Importing and previewing images with drag-and-drop
Adding images

Importing and previewing images with drag-and-drop

Importing images via drag-and-drop is a convenient shortcut for previewing pages. You can drag-and-drop to import graphics files from the desktop, including GIF, JPEG, Progressive JPEG, PNG, PICT, TIFF, and BMP files. You can also drag and drop directly from Adobe Photoshop onto the document window. Use Ctrl+Alt+drag (Windows) or Command+Option+drag (Mac OS).

Adobe GoLive automatically converts PICTS, TIFFs, and BMP image files to the GIF, JPEG, Progressive JPEG, or PNG file format, depending on the modules installed and the preferences set. See Setting image preferences for more information. These converted image files are placed in the Import Images folder within the Adobe GoLive program folder, or any other folder you select. These converted files are not production quality however, and they should be used only for placement and previewing. For production quality images, you should consider using Adobe ImageReady(TM). When you are satisfied with the result, move the your production quality images to the Image or Media folder within your site folder.


About image formats
Adding images

About image formats

The standard image formats for the Web are GIF and JPEG. Line art typically uses the GIF format. Photographs and other images with more than 256 colors generally use the JPEG format. Save JPEG files as RGB (CMYK or grayscale won’t work). PICT and TIFF file formats won’t display on the Web. All graphics need to be at a resolution of 72 dots per inch.

Designed to replace the older and simpler GIF format, PNG has three major advantages over GIF: variable transparency through alpha channels, cross-platform control of image brightness through gamma correction, and two-dimensional interlacing. PNG also compresses better than GIF in almost every case, but the difference is generally only around 10% to 30%. One GIF feature that PNG does not try to reproduce is animation; PNG is a single-image format only.


Simulating Windows gamma in Mac OS
Adding images

Simulating Windows gamma in Mac OS

Graphics viewed in Windows look darker than in Mac OS. This is due to a difference in gamma settings. You can simulate the Windows settings in Mac OS:

•   On your Monitors and Sound control panel, set the gamma to “Uncorrected.”

•   Download the GammaToggle FKEY. (Shareware by Roland Gustafsson at http://www.acts.org/roland/thanks.)

•   Use Gamma by Knoll Software (supplied with Adobe Photoshop).

A. Click Generate to generate a low-resolutionimage. B. Use these options to resize the image. C. Choose an option to align the image.


Adjusting image size
Adding images

Adjusting image size

You can resize images in Adobe GoLive; however, it’s usually best to resize images in your image-editing application for a variety of reasons:

•   If you place an oversized image on your page and then reduce its size, your page still references the unnecessarily large image file, resulting in inefficient use of bandwidth.

•   If you place a small image on your page and enlarge it, the image may look jagged.

When you change the size of an image, Adobe GoLive displays a resize warning icon on top of the image to warn you that the image may have an unnecessarily large file size and is not displayed at its optimum resolution.

The resize warning icon reminds you that the image might not display at its optimum resolution.

To adjust image size in Adobe GoLive:

With the image selected, select the desired unit of measurement option in the Image Inspector, and enter a new value for Height and Width. The Image option in the pop-up menu sets the width automatically, based on the original size of the graphic.

Note: You should not use this method to routinely reduce image size.


Aligning images with text
Adding images

Aligning images with text

You use the alignment options in the Image Inspector to align images with their surrounding text. Using these options ensures that text and images stay together, especially if you are not working on a layout grid.

Note: If you are working with a layout grid, you must insert images into text frames to use the alignment or spacing options.

To align an image with its surrounding text:

Select the image, and choose an option from the Alignment pop-up menu in the Image Inspector:

•   Top, Middle, and Bottom align the first line of text with the corresponding part of the image. (Bottom is the default option.)

•   Left and Right align the image to the left and right of the text box or window.

•   Text top and Baseline align the image to the top and baseline of the first line of text.

•   Absmiddle and Absbottom align the absolute center and bottom of the text (as opposed to the text baseline) with the center and bottom of the image, respectively.

To adjust the vertical and horizontal spacing between an image and surrounding text:

1  Select the image, and click the Special tab of the Image Inspector.

2  Enter a value in the HSpace and VSpace text boxes to adjust the horizontal and vertical spacing, respectively, in pixels. Then press Enter.


Additional image options
Adding images

Additional image options

The Special tab of the Image Inspector contains additional options that let you adjust border width, define alternative text for an image, and convert an image to a form button or link. (Alternative text is displayed in browsers that are configured not to display images; it is also used by voice-recognition software.)

To activate a box around the image and adjust its width:

1  Select the image, and select Border in the Special tab of the Image Inspector.

2  Type in the desired border width in pixels, and press Enter.

If the border width attribute is on and set to 0, and if the image is the source of a link, a chain link symbol appears to indicate that this is a linked image.

To select an alternative message text:

1  Select the image, and click the Special tab of the Image Inspector.

2  Type your alternative message text into the Alt Text box, and press Enter.

To convert the image into a form button:

1  Select the image, and select Is Form in the Special tab of the Image Inspector.

2  Type in the name you want to be displayed with the form, and press Enter.

To convert an image to a link:

1  Select the image, and click the Link tab in the Image Inspector.

2  Click the New Link button, and then type in the URL to define the destination of the link; or use the Browse button to choose a location within your site. A border appears around the image (unless the border is on and set to 0) to indicate that it is the source of a link.

A. Click New Link to create an undefined link. B. Type in a name for the link here. C. Use this optionto specify the target frame in the destination frame set.


Setting image preferences
Adding images

Setting image preferences

The General Image Preferences dialog box lets you determine how Adobe GoLive handles non-Web-ready images. Files converted to GIF, JPEG, or PNG by Adobe GoLive are not production quality; they should be used for previewing and placement only.

To select an import folder for PICT, TIFF, or BMP files imported for previewing using drag and drop:

1  Choose Edit > Preferences, expand the General preferences by clicking the + sign (Windows) or triangle (Mac OS), and then select Image.

2  In the Import Folder text box, click Select to choose another import folder, or leave the folder selection unchanged to place the images in the Import Images folder in the Adobe GoLive program folder.

To activate automatic conversion to GIF, JPEG, Progressive JPEG, or PNG files:

1  In the General Image Preferences dialog box, locate the File Format options.

2  Select Ask User to pick a dedicated format for each file you import, or choose an option from the pop-up menu to set a default format. Three basic options are available:

•   GIF has a companion Interlaced check box that lets you choose between the standard and interlaced GIF formats.

•   JPEG has a companion Progressive check box that lets you choose between the standard and Progressive JPEG formats. An additional pop-up menu lets you choose from six standardized compression levels.

•   PNG has a companion Interlaced check box that lets you choose between the standard and interlaced PNG formats.

To make default settings for low-resolution images that appear while the main image is loading:

1  In the General Image Preferences, dialog box, locate the Low Source options.

2  Select Place in Same Folder as Source to store low-resolution images generated by Adobe GoLive in the same folder as the high-resolution source images; or choose Place in Import Folder to store them temporarily before you move them to the site folder.

3  Select the Auto-Generate by Default option to instruct Adobe GoLive to automatically create a low-resolution copy of each image you import and add it to the page.

To avoid problems in Web browsers, make sure that all your images have the proper extensions to identify their file type; for example, .gif, .jpg, .jpeg, or .png.


Adding color
Adding Content

Adding color

The Color Palette offers a number of palettes for painting text and objects. You color selected objects by selecting a color in the Palette and then dragging it from the preview pane of the Color Palette to the color field of the Inspector window.

To open the Color Palette:

Do one of the following:

•   Choose View > Color Palette (Windows) or Window > Color Palette (Mac OS).

•   Click any color field in the Inspector window.

To color text or an object:

1  Select the text or object you want to color.

2  In the Color Palette, select a color from the tab of your choice.

3  Drag the color from the preview pane of the Color Palette to the color field in the Inspector window or to selected text in the document window. You can also drag a color from the scrolling list in the Real Web Colors or Web Named Colors tabs (see Choosing a color).

To copy a color from an existing object into the Palette:

1  In the Color Palette, click the Apple Colors tab ( [image]), the Windows Colors tab ( [image]), or the Web safe I tab ( [image]) (see Choosing a color).

2  Move the pointer to any swatch in the Palette, and hold down the mouse button.

3  With the mouse button still down, drag to the object whose color you want to copy in the document window. The object’s color is copied into the preview pane at the top of the Color Palette.

4  Drag the new color from the preview pane and drop it on any object or in the color field of the Inspector.

See also:

Choosing a color

Using ColorSync 2.5 (Mac OS)


Choosing a color
Adding color

Choosing a color

The Adobe GoLive Color Palette lets you add colors using the different palettes. The Real Web color tab displays truly “Web-safe” colors—that is, colors that display properly in any Web browser.

To choose a color:

Click the color tab you want to use.

RGB The RGB tab ( [image]) contains three slider controls that let you adjust the percentage of the red, green, and blue portions of the spectrum. On Mac OS, the Percent button at the right edge of the tab panel toggles between RGB values in percentages and the 256-step numerical scale.

CMYK The four slider controls of the CMYK tab ( [image]) let you adjust the percentage of the cyan, magenta, yellow, and black portions of the spectrum. On Mac OS, the Percent button at the right edge of the tab panel toggles between CMYK values in percentages and the 256-step numerical scale.

Grayscale The Grayscale tab’s ( [image]) single slider control allows you to adjust the percentage of black to create shades of gray. On Mac OS, the Percent button at the right edge of the tab panel toggles between grayscale values in percentages black and the 256-step numerical scale.

Indexed Color The color wheel of the Indexed Colors tab ( [image]) lets you access the entire color spectrum currently supported by your video hardware, and provides a brightness slider control. On Mac OS, the Percent button at the right edge of the window toggles between indexed color values in percentages and the 256-step numerical scale.

To select a color, click a location in the color wheel, then adjust brightness as needed.

Apple Colors (Mac OS) and Windows Colors (Windows) The Apple Colors tab ( [image]) and Windows Colors tab ( [image]) display various fixed system color spaces up to a maximum of 256 colors.

The pop-up menu in the Apple Colors tab lets you limit your choice of colors, capture the current desktop colors, and build a custom Color Palette by copying colors from objects on the desktop or in the window.

HSV Color (Windows) The HSV Color tab ( [image]) lets you set hue, saturation, and value independently. You set hue in the outer ring, and you set saturation on the horizontal axis of the circle and value on the vertical axis.

Real Web Colors The Real Web Colors tab ( [image]) displays 216 no-dither browser-safe colors. The Value text box in the Palette shows the Red, Green, and Blue hexadecimal value sent to the Web browser.

Note: The colors on the Real Web Colors tab are browser-safe across platforms. By limiting the number of colors to these 216 eight-bit colors, you can ensure that your page looks good when viewed on a system set to 256 display colors (standard PCs).

Web Named Colors The Web Named Colors tab ( [image]) displays a choice of browser-callable colors. The Name and Value text boxes show the clear-text name and the HTML control code sent to the Web browser.

Note: The colors on the Web Named Colors tab are not all browser-safe across platforms.

Site Colors The Site Colors tab ( [image]) displays the colors you have collected in the Colors tab of the site window. (For more details, see Adding color to a Web site.)

The colors in this tab are only available if the site document is open and the active site contains site colors. If no site document is open, a No Active Site message appears in the status line at the bottom of the window.


Using ColorSync 2.5 (Mac OS)
Adding color

Using ColorSync 2.5 (Mac OS)

Adobe GoLive supports ColorSync(TM) 2.5 color matching technology from Apple Computer. ColorSync 2.5 reconciles the color spaces of JPEG images and computer monitors, allowing both the author and the viewer to view JPEG images without any artifacts (stray pixels). Using ColorSync, JPEG images are displayed using ICC-compatible color profiles that are either embedded in the image itself or that are included as stand-alone files.

See also:

To choose ColorSync options

To set ColorSync preferences


To choose ColorSync options
Using ColorSync 2.5 (Mac OS)

To choose ColorSync options:

1  For images, do one of the following:

•   To set options for a single JPEG image, select the image in the document window, and click the Link tab of the Image Inspector.

•   To set options for all JPEG images within the page, click the Page icon ( [image]) at the top of the document window, and click the ColorSync tab of the Page Inspector.

2  For profiles, do one of the following:

•   Click Default to use a standard RGB profile built into Adobe GoLive for the current image.

•   Click Profile, and enter the address of the color profile you want to use, or use the Browse button or the Point and Shoot button to select the profile.

Note: References to external color profiles are not monitored by the Adobe GoLive built-in link parser. After uploading your site to your ISP’s FTP server, check that the stand-alone ICC color profile has been included in the upload.

•   None deactivates ColorSync support for the selected image.

•   Embedded displays the name of an embedded color profile in a selected JPEG image. Embedding color profiles in JPEG images is a feature supported by the most recent versions of popular imaging programs, such as Adobe Photoshop.

Note: Embedded color profiles in JPEG images are currently supported only by Microsoft Internet Explorer version 4.01 and later.

See also:

To set ColorSync preferences


To set ColorSync preferences
Using ColorSync 2.5 (Mac OS)

To set ColorSync preferences:

Choose Edit > Preferences, and click the ColorSync icon in the left scrolling panel.

•   Deselect Display Images with ColorSync to deactivate ColorSync support in Adobe GoLive.

•   Click Use Default RGB Profile If Not Specified to use a built-in default color profile when ColorSync is activated but no profile is specified for an image.

See also:

To choose ColorSync options


Adding links
Adding Content

  Adding links

You create links by first selecting the text you want to link from and then specifying the link destination. The link destination can be a Web page, a specified location on a Web page, or a non-Web resource, such as an FTP server or e-mail address. For information on creating dynamic events that are triggered by mouse actions, or on creating links that are triggered by actions other than mouse clicks, see Using actions.

Two terms are commonly used in discussing Web links:

•   An anchor is a specified location on a Web page for a link destination. (See Creating anchors.)

•   A clickable image map is a link from an image or part of an image. (See Creating clickable image maps.)

See also:

To create a text link

To remove a link

Creating anchors

Setting link warnings

Creating clickable image maps


To create a text link
Adding links

To create a text link:

1  Select the text you want to use as the origin of the link.

2  Do one of the following:

•   Command-drag (Mac OS) from the selected text to the desired destination anywhere within the site.

•   Click the New Link button ( [image]) in the toolbar, and enter a link destination in the Inspector; or use the Browse button or the Point and Shoot button to choose a destination within your site.

•   Drag the Page icon ( [image]) from an open document window to the selected text to create a link to that Web page (Mac OS).

3  If your link destination will appear in a frame, specify the frame in the Target text box.

Select the text you want to link, and then Ctrl-drag (Windows) or Command-drag (Mac OS) to the link destination.

See also:

To remove a link

Creating anchors

Setting link warnings

Creating clickable image maps


To remove a link
Adding links

To remove a link:

With the linked item selected, click Remove Link ( [image]) in the toolbar.

See also:

To create a text link

Creating anchors

Setting link warnings

Creating clickable image maps


Creating anchors
Adding links

Creating anchors

An anchor is a specified location on a Web page that serves as the destination of a link. You create anchors either by dragging from the Point and Shoot button directly to the location you want, or by dragging the Anchor icon from the Basic tab of the Palette to the location and then specifying the origins of the links.

When creating anchors, keep the following in mind:

•   Anchors don’t always work the same way in Netscape Navigator/Communicator and Microsoft Internet Explorer, so you should test them extensively before publishing your site.

•   Certain link and anchor combinations don’t work in the Adobe GoLive Preview mode.

•   Anchor icons shouldn’t be placed directly on a layout grid. Instead, place anchors in the flow of HTML text, in a layout text frame, or in a table. (You can add a small layout text frame to the layout grid to hold the anchor.) For more consistent results, put the anchor near the left margin of the page.

•   You cannot create an anchor directly to a graphic. (HTML does not support this feature.)

To create an anchor using the New Link button:

1  Select text in the document window.

2  Click the New Link button ( [image]) in the toolbar.

3  In the Text Inspector, drag from the Point and Shoot button to the location on the page where you want the anchor.

To create an anchor using the anchor icon:

1  Drag the Anchor icon from the Palette to the location in your document that you want to link to.

Note: Anchors should not be placed directly an the layout grid; they should be placed in a text frame or within a table.

2  In the Name text box of the Anchor Inspector window, type a unique name for the new anchor. This allows you to track links, even when the page contains multiple anchors.

3  Once you have created an anchor, you can use the Point and Shoot button to create any number of links to that destination.


Setting link warnings
Adding links

Setting link warnings

The Adobe GoLive Link Warnings feature monitors whether links in a site are working properly and alerts you to problems resulting from broken links. When the Link Warning feature is active, broken links are marked with a red border (images) or a red highlight (text), both in the document and in the URL text box of the Inspector. You can change the appearance of link warnings in the Display preferences (see Customizing the screen display).

Broken links are color-highlighted, both in the document window and in theURL text box of the Text Inspector.

To show and hide link warnings:

Click the Link Warnings button ( [image]) in the toolbar, or choose Edit > Show/Hide Link Warnings.

It is easier to manage links in your Web site if you have a site window open all the time.


Creating clickable image maps
Adding links

Creating clickable image maps

Clickable image maps are links from images or parts of images within Web pages. Adobe GoLive lets you create clickable maps on top of your image, edit them, and link them to Web pages or other resources. You can also connect the hot-spot areas in a clickable image map with scripted actions. For more information, see Using actions.

See also:

To create a clickable image map

To customize the appearance of the hot spot


To create a clickable image map
Creating clickable image maps

To create a clickable image map:

1  Select an image in your document.

2  In the Map tab of the Image Inspector, select Use Map.

3  Type a name for the map in the Map Name text box, and press Enter.

4  To specify a hot spot (or link area), click one of the region tools (selection tool, rectangle, circle, or polygon), and then drag in the image to draw the link area.

5  Enter a URL for the link, or use the Browse button or the Point and Shoot button to select a link destination (see Adding links for detailed instructions).

See also:

To customize the appearance of the hot spot


To customize the appearance of the hot spot
Creating clickable image maps

To customize the appearance of the hot spot:

1  Select the hot spot in the image.

2  In the Map tab of the Image Inspector, use the following tools:

•   Choose one of the regional tools to move or resize the hot spot by dragging.

•   Click the URL button to display the link destination URL in the hot spot.

•   Click the frame or color buttons to edit or turn border and color display on and off, respectively, while editing.

A. Display URLs B. Frame Regions (show/hide border) C. Color Regions (show/hide color) D. Select Color (modify color)

•   If you are working with multiple overlapping hot spots, use the Bring to Front and Send to Back buttons to change the stacking order.

A. Brings selected hot spot to the front. B. Sends selected hot spot to the back.

See also:

To create a clickable image map


Previewing pages
Adding Content

Previewing pages

The Adobe GoLive Preview mode lets you preview your work and test your links without launching an external application. When you preview a page using Preview, Adobe GoLive shows you “still photo” previews for plain pages and animated previews for QuickTime movies, animated GIFs, or any other of the plug-in media items supported. What you see closely resembles your page as finally published on the Web.

You can also preview your pages using browsers. You need to preview in browsers, for example, to determine potential browser differences; you also need to use browsers to preview JavaScript, DHTML, Macromedia Shockwave animations, or other items Adobe GoLive doesn’t provide native support for.

See also:

To preview your page without launching a Web browser

To preview your page in a Web browser

To add Web browsers to the Show in Browser menu


To preview your page without launching a Web browser
Previewing pages

To preview your page without launching a Web browser:

Click the Preview tab in the document window.

You can scroll the preview to check your page layout and click all the hot spots on your page to test the links. Unlike a browser, Adobe GoLive opens each referenced page in a window of its own.

See also:

To preview your page in a Web browser

To add Web browsers to the Show in Browser menu


To preview your page in a Web browser
Previewing pages

To preview your page in a Web browser:

Do one of the following:

•   To start all selected browsers, click the Show in Browser button at the far right of the toolbar or choose Special > Show in Default Browser.

•   To launch a single browser, click the symbol next the Launch Browser button on the toolbar. In the pop-up menu, choose the desired browser; or choose your browser from the Special > Show in Browser submenu.

Show in Browser button and menu

See also:

To preview your page without launching a Web browser

To add Web browsers to the Show in Browser menu


To add Web browsers to the Show in Browser menu
Previewing pages

To add Web browsers to the Show in Browser menu:

1  Make sure that the desired browser is installed on your hard disk and that all plug-ins you need for previewing are placed in the browser’s Plug-ins folder (or any other location your browser uses for multimedia extensions).

2  Choose Edit > Preferences, and click the Browsers icon.

3  Click Find All to add all browsers on your hard disk to the browser list.

4  Click Add to select a browser. Locate the browser, click the Add button, and then click Done.

5  In the browser list, make sure the check box next to each browser you want to appear in the Show in Browser menu is selected. Deselect the check box to temporarily deactivate it.

Note: Most browsers allow only one version to be open. For example, you can open Netscape Navigator and Microsoft Internet Explorer at the same time but not Netscape Navigator 3 and 4.

When two or more browsers are selected in the Browsers preferences, a generic browser icon appears in the toolbar. When only a single application is selected, the program icon of that browser appears in the toolbar.

See also:

To preview your page without launching a Web browser

To preview your page in a Web browser


Viewing document information
Adding Content

Viewing document information

You can use the Adobe GoLive Document Statistics window to view general document information and the approximate time your page needs to download.

To view information for the current Web page:

Choose Special > Document Statistics.

It’s important to note that download time estimates in this window are rough estimates only, based on a well-defined set of circumstances. External conditions, such as heavy traffic on the network and Web server overload, may substantially change real-life download times. The byte counts do not include media such as QuickTime or sound because they may be set to start playing before they are fully downloaded.


Spellchecking text
Adding Content

Spellchecking text

The spellchecker works much like the same tool in word-processing applications. It checks the visible content of the page (ignoring the HTML), letting you change or skip presumed misspellings. Unlike other spellchecking tools, however, Adobe GoLive can spellcheck an entire site.

Based on a combined dictionary in the Modules subfolder of the Adobe GoLive program folder, the built-in spellchecking tool currently supports three sets of English spelling rules.

To spellcheck your document:

1  Make sure the document window is selected in Layout or Source view. In either view, you can start spellchecking at the current position, select text in order to spellcheck only parts of the document, or select From Top to start spellchecking at the beginning of the document.

2  Choose Edit > Spellchecking.

Note: Adobe GoLive does not display any document windows in the background while you are spellchecking an entire site. It only open pages with questionable words.

3  Select a set of spelling rules from the Language pop-up menu.

4  Click Check to start running the spellchecker.

The program displays the first questionable word, accompanied by a description of the problem and suggested corrections. If you are spellchecking a site, it opens the document containing the questionable word.

5  If you are satisfied with the first suggestion, click Replace. If not, double-click a suggestion in the Suggestions list box, or edit the questionable word before clicking Replace.

You have three options for accepting questioned words:

•   Click Skip to accept a single occurrence of the questionable word. When the program finds the next occurrence of that word, it again prompts you to correct it.

•   Click Skip All to accept the questionable word for the current session. Any further occurrences of that word are ignored.

•   Click Learn to add the unknown word to your personal dictionary. This word is recognized as correct in the future. You can edit your personal dictionary in the Spell Checking preferences.

6  If you are spellchecking a site, click Next File to quit spellchecking the current document and go on to the next page.


Editing a personal dictionary
Adding Content

Editing a personal dictionary

If you have used Learn to add new words, you can edit your personal dictionary in the Spell Checking preferences.

If you have installed additional languages, you can select an option from the Personal Dictionary pop-up menu and add custom entries. (To use additional languages, you must install them using the custom install option on the Adobe GoLive CD.)

Note: You cannot use more than two languages at the same time. If a third language is installed, the second language (other than your chosen main language), is automatically deactivated.


Searching within a document and within a site
Adding Content

Searching within a document and within a site

Using the Adobe GoLive search tools, you can find and replace text and HTML code elements in any file throughout your hard disk, you can simulate how Web search engines search your site, and you can search through complex sites for specific files.

See also:

Searching in the current document

Using wildcards in a search

About back-references in wildcard searches

Simulating how Web engines search your site (Mac OS)

Finding files

Setting Find preferences


Searching in the current document
Searching within a document and within a site

Searching in the current document

You can use Find & Replace in Layout, Outline, or Source view. Depending on the view, you can search for text and some HTML code elements in the current document. Once you find what you’re looking for, you can automatically change it to something else. You can also search for selected text without opening the Find dialog box.

See also:

To find and change text in the current document

To search for selected text in the current document without opening the Find dialog box

To find and replace text or HTML code elements in multiple files


To find and change text in the current document
Searching in the current document

To find and change text in the current document:

1  Choose Edit > Find, and click the Find & Replace tab if necessary.

2  Do one of the following:

•   Type or paste in the text you want to find.

•   Choose an item from a previous search from the search history list at the top of the Find pop-up menu.

•   Select text in the document window, and drag it to the Find text box.

Previously used search strings appear in the search history menu.

3  Select options to customize your search:

•   Ignore Case lets you search for matching text that begins with either uppercase or lowercase letters. For example, a search for “frequent flyer” also finds “Frequent Flyer.”

•   Word Only (Windows) or Entire Word (Mac OS) lets you ignore search text that is embedded within a larger word. For example, if you are searching for the entire word “any,” GoLive disregards “many.”

•   Regular Expression allows wildcard searches and adds wildcard search options to the bottom of the Find pop-up menu. For more information, see Using wildcards in a search.

Note: Do not use Regular Expression unless you understand wildcard searching. This powerful option can cause unexpected results, especially if you plan to search for and replace multiple items.

•   From Top starts the search at the beginning of your document.

•   Wrap Around restarts the search at the beginning after it reaches the end of the document.

•   Backwards searches from the current cursor position toward the top of your document. (This changes the From Top option to From Bottom.)

4  To replace the text, click the symbol next to Replace, and either type in text or choose an item from the search history list in the Replace pop-up menu.

5  Click Find to start searching your document. Adobe GoLive highlights the first match, if any. Depending on your Find preferences, the Find dialog box moves to the background or stays in the foreground. For more information, see Setting Find preferences.

6  Continue searching:

•   Click Find Next to continue the search.

•   Click Replace to replace the text.

•   Click Replace & Find to replace the text and find the next occurrence.

•   Click Replace All to automatically replace all instances of the text in the document.

See also:

To search for selected text in the current document without opening the Find dialog box

To find and replace text or HTML code elements in multiple files


To search for selected text in the current document without opening the Find dialog box
Searching in the current document

To search for selected text in the current document without opening the Find dialog box:

1  In Layout, Source, or Preview view, select the desired text in your document. The selection must be located within a paragraph.

2  Choose Edit > Find Selection.

Adobe GoLive starts looking for selected text at the current cursor position and highlights the next occurrence of the text using the current settings in the Find dialog box.

You can also find and replace text without reopening or moving the Find and Replace dialog box to the foreground by using Edit > Replace or Edit > Replace & Find Next. These commands are only available if the item searched for was found and is still selected.

See also:

To find and change text in the current document

To find and replace text or HTML code elements in multiple files


To find and replace text or HTML code elements in multiple files
Searching in the current document

To find and replace text or HTML code elements in multiple files:

1  Choose Edit > Find, and click the Find & Replace tab if necessary.

2  With the site window open, type in text or HTML code, and select search options.

Note: If you plan to do a global search and replace in multiple files, you should be sure to make a backup of your files and site, especially if you are using wildcard characters or Regular Expression.

3  Click the symbol next to Find in Files, and do one of the following to define the scope of your search:

•   Click or Shift-click to select the desired file or files in the site window, and drag the file or files into the Files list.

•   Click Add Files, and select the files you want to search in the dialog box that appears. You can also use this dialog box to remove files.

•   Click Add Site to add an entire site. You can then remove individual files by selecting the files in the list and then pressing Backspace or Delete, or clicking Remove All.

4  Select options to customize your search:

•   Source Editor (Windows) or Source Mode (Mac OS) lets you view the matches in source view, displayed as raw HTML code. Select this option to find individual HTML tags; otherwise Adobe GoLive lets you find only visible content.

Important: Be careful about selecting Source Mode if you plan to use the search and replace function. If you select Source Mode, Adobe GoLive finds and replaces any occurrence of the text, whether it is visible document content or HTML code. For example, if you search for and replace the word “Traveler” in all project files with Source Mode selected, Adobe GoLive replaces that word in hyperlinks pointing at a filename (for example, Frequent-Traveler.html), disrupting links in the process.

•   Don’t Open Windows (Mac OS) keeps files closed when matches are found. It is useful if you expect to find matches in more than a few files. Otherwise Adobe GoLive opens all files containing the match, resulting in multiple stacked windows and memory problems.

•   Encoding lets you select the language encoding used in the search from a pop-up menu.

5  Click Find to start searching the selected file or files. Adobe GoLive shows you the first file found containing matching text. If you didn’t select Don’t Open Windows, Adobe GoLive opens the file.

6  Continue searching by doing one of the following:

•   Click Find Next to find or view the next match in the same or next document.

•   Click Find All to find or view all matches. In the list box, all files with matches are marked by a number appearing in the Hits column. Double-click a file with a hit count to open the file and highlight the first match.

While Adobe GoLive searches selected files or folders, a moving arrow in the Files list indicates the file currently being searched, and a number to the right of the filename indicates how many occurrences have been found.

A. The small arrow indicates the file currently being searched. B. Numbers displayed in the Hits column indicate the numberof matches in the file.

7  Search for and replace text.

Note: You’ll receive a warning message if Adobe GoLive is unable to save while searching and replacing a file. You can choose to cancel the operation or allow Adobe GoLive to continue.

See also:

To find and change text in the current document

To search for selected text in the current document without opening the Find dialog box


Using wildcards in a search
Searching within a document and within a site

Using wildcards in a search

When you select Regular Expression in the Find dialog box, you activate wildcard searching. (Regular Expression is a proven technology used in many word-processing applications.) GoLive makes wildcard searching easier by allowing you to use editable wildcard patterns in the search history pop-up menu. For more information, see Setting Find preferences.

Use these guidelines when wildcard searching:

•   Characters that are used to specify wildcard options, such as “?”, “\”, “[”, and “]”, must be preceded by a backslash. For example, “\?” finds any question mark.

•   The caret serves as a wildcard character only when it precedes a range of characters, as in “[^A-Z]”.

•   The dash does not act as a wildcard character if it precedes a range of characters, as in “[-ABC]” or “[^-ABC]”. At any other location, it acts as a wildcard character indicating a “from…to” relationship.

The following table lists available wildcard search options:

Wildcard Option	Action	Examples
Wildcards for Single Characters
.	Finds any single character.
[]	Finds any one of the characters in square brackets.	“[0123456789]” finds any digit.“[a-zA-Z]” finds any alphabetical character.
	Finds any one character in a range enclosed in square brackets.	“[0-9]” finds any digit.
[^]	Finds any character other than the characters following the caret symbol (^) in the brackets.	“[^ab]” finds any character, except for “a” and “b”
\d (or [0-9])	Finds any digit.
\D (or [^0-9])	Finds any character other than a digit.
\w (or [a-zA-Z])	Finds any character.
[a-zA-Z]+	Finds any word.
\W (or [^a-zA-Z])	Finds any character other than alphabetical characters.
\s (or [SPACE+\t])	Finds any white space (SPACE = space key).
\S	Finds any character other than a white space.
\r	Finds any line break (in HTML source code).
\t	Finds any tab character, such as indentations in HTML source code.
\x00 - \xff	Finds any character, as identified by its ASCII value.	“\X43” finds “C”
Quantifiers
?	The question mark makes the preceding character or string (enclosed in parentheses) optional.	“(Adobe)? GoLive” finds “Adobe GoLive” and “GoLive”.
+	The plus sign finds one or more occurrences of the preceding character or search string in a row.	“a+” finds “a”, “aa”, “aaa”, etc.
*	The star is equivalent to “+”, but does not respond with a “not found” message if no occurrences are found.	[0-9]*,[0-9][0-9]+
Other Search String Modifiers
|	The vertical bar serves as a separator for alternative search strings.	“Adobe|GoLive|4.0” finds “Adobe”, “Golive”, and “4.0”.
()	Parentheses enclose a search string that serves as a definition for quantifiers.	See the description of “?” above.
^	In source mode, the caret finds the start of a line. In Layout view, it finds the beginning of a paragraph.
$	In source mode, the dollar sign finds the end of a line. In Layout view, it finds the end of a paragraph.
Search String	Finds
Adobe|GoLive	"Adobe" or "GoLive"
m(i|a)ll	"mill" or "mall"
Adobe (GoLive)?	"AdobeGoLive" if the latter exists, else "Adobe"
</?HTML>	"<HTML>" and "</HTML>"
Ye+s	The word "Yes", containing any number of successive "e" characters, such as "Yes", "Yees", "Yeees", etc.
Michael J[a-z]*	Any string beginning with "Michael J", followed by any number of lowercase letters, such as "Michael Jackson", "Michael Jamrosy", and "Michael Jordan"
<H[1-6]>	HTML headers H1 through H6, including "H1", "H2", "H3", etc.
<[a-zA-Z][a-zA-Z0-9]*>	Any start tag that has no attributes, such as "<P>", "<b>", "<H2>", "<ImaGe>"
<[a-zA-Z][a-zA-Z0-9]*[^>]*>	Any start tag, including those with attributes, such as "<image width=20>"


About back-references in wildcard searches
Searching within a document and within a site

About back-references in wildcard searches

Back-references let you replace without specifying text. They appear as wildcard strings in the Replace text box, from which they refer back to any string that matches a part of the search pattern.

A back-reference consists of a backslash character followed by a number, for example “\1”, “\2”, and so on. The number refers to a subexpression (enclosed in parentheses) of the wildcard search pattern in the Find text box:

•   “\1” refers to the first subexpression in the wildcard search pattern. This subexpression starts at the first opening bracket from the left and ends with the complementary closing bracket.

•   “\2” refers to the second subexpression, which starts at the second opening bracket from the left and ends with the complementary closing bracket.

When you click the Replace button, each back-reference is replaced with the part of the matching text that has been recognized by the subexpression it refers to.

For example, you enter ((Adobe)?Golive) in the Find text box. This search patterns finds any occurrence of “Adobe GoLive” or “Golive”. (The “?” character makes the “Adobe” enclosed in the second pair of parentheses optional.) You enter the wildcard pattern \1 4.0 in the Replace text box: If the match is “Adobe GoLive”, the result is Adobe GoLive 4.0 If the match is “Golive”, the result is Golive 4.0.


Simulating how Web engines search your site (Mac OS)
Searching within a document and within a site

Simulating how Web engines search your site (Mac OS)

The index search feature lets you simulate a scenario on your local machine in which a potential viewer enters keywords in a search engine’s query to find sites that deal with the same topics as yours. By combining typical keywords in different ways, you can estimate whether viewers will reliably find your site when you publish it on the Web using a search engine.

Note: This simulation does not create the index that a Web search engine will use for your site, nor does it offer search capability within a site. Site search functionality is added most commonly by a CGI script running on your Web server. Contact your webmaster or ISP for information on what site search capabilities are available.

Like a real-life search engine, the index search tool is always seeking to keep its index as small and easily searchable as possible. Therefore, it includes only meaningful concepts (for example, nouns such as “traveler” and “newsletter”) and skips “filler” words (for example, articles such as “the” and “a”) when building the index file. The index search finds whole words only.

To use index search (Mac OS):

1  With a site file open, choose Edit > Find, and click the Search in Site Index tab.

Note: If the Search in Site Index panel does not appear in the Find dialog box, make sure that the AIAT module is located in the Modules folder. This index feature is based on Apple Information Access Technology (AIAT) developed by Apple Computer, Inc.

2  Select options to customize your index:

•   Choose a different language encoding from the Encoding pop-up menu if you want to enter foreign-language text (and you have the proper system fonts and keyboard drivers installed).

•   Select a relevance ranking in the pop-up menu at the lower left corner of the window. This ranking controls the way hits are displayed (80% lists hits with an 80% ranking and better, and so on).

You can choose a different option from the rank menu at any time to rebuild an existing hit list. For example, if you end up with a long list of hits after selecting the All option, simply choose >60% to shorten the list.

•   Select Double click opens an untitled copy if you want to be able to view all of the relevant hits in a specific document. With this option selected, double-clicking a hit in the list box creates an untitled copy of the document with all of the hits highlighted in red.

•   Select Auto Update if you want an index saved automatically whenever you save changes to your site.

3  In the Search text box, type in one or more keywords to search for—for example, “frequent” and “traveler”—separated by a space. Index search finds whole words only; it is not case-sensitive (“Traveler” and “traveler” yield the same result). If multiple sites are open, choose a site to search from the Site pop-up menu.

4  Do one of the following:

•   Click Build Index if this is the first time you are searching a site. If you skip this step, you are prompted to build an index before the search is started.

•   Click Update Index if you have made changes in the current site since you built or updated the index. If you previously selected Auto Update, the index has been updated whenever you saved changes.

Index search indexes your site and creates an index file (for example, Newsletter.p.index) in the same folder as your site document.

5  Click Search. All hits appear in the list box at the bottom of the Find window, with results in order of relevance. Click the symbol to the left of the filename to view the hits in more detail. Clicking a hit renames the column Term, and surrounding text for each hit appears in the Context column.

6  To view individual hits, double-click an entry. If you selected Double-clicking Opens an Untitled Copy, an untitled copy of the document opens with all hits highlighted.

Hits are marked in red throughout the document.

7  Continue performing index searches with different keywords or keyword combinations. The closer your results are to 100%, the more likely it is that search engines will index your site in the way you wish.


Finding files
Searching within a document and within a site

Finding files

You can find individual files or objects (such as colors and e-mail addresses) throughout your site. This is particularly useful if you have a huge site with dozens or even hundreds of pages. Instead of scrolling through long file lists in the site window, you can enter a full or partial filename or URL.

To search for files within a site:

1  With a site file open, do one of the following:

•   Choose Edit > Find, and click the Find File tab.

•   Click the Find Files in Site button ( [image]) in the site toolbar.

2  If you have opened several site files, choose a site from the Find Item in Site pop-up menu.

3  Type in the full or partial name of the file or URL you are looking for, and choose options for Whose:

•   Choose Name or URL from the leftmost pop-up. Name searches the site without filtering, allowing you to search for objects, such as e-mail addresses or colors managed in your site.

•   Choose Contains, Is, Begins With, or Ends With from the rightmost pop-up menu.

4  Click Find. Adobe GoLive displays the first item in the site window. If you are searching for files, the matches appear either in the Files tab or in the Site view tab, depending on which tab was activated in the site window when you started searching. Other items you are searching for appear in their respective tabs. Colors, for example, appear in the Color tab.

Find File highlights any item it finds in the different tabs of the site window.

5  To continue searching, click Find Next.


Setting Find preferences
Searching within a document and within a site

Setting Find preferences

The Find preferences let you control the behavior of the Find dialog box and let you enter default options for wildcard searching.

To set Find preferences:

1  Choose Edit > Preferences, click Find, and set the following options:

•   Whether the Find dialog box is closed or remains open when you find a match.

•   How GoLive deals with text files when you search a site in Source view (Mac OS). Use Only HTML files lets you limit searches to Web pages; Use HTML and Text Files lets you include all text files found in a site, including external stylesheets or JavaScript files, for example.

2  Click the symbol to the left of Find in the left pane of the Preferences dialog box, and select Regular Expression to list editable wildcard search options that appear in the search history menu of the Find window.

3  To add or edit wildcard search strings, do one of the following:

•   To add more wildcard search strings, click New. In the text box below the Name list box, type in a descriptive name—for example, “any word + GoLive.” In the text box below the Regular Expression list, type in the new wildcard search string. For example, enter “[a-zA-Z]+ GoLive” to find any word followed by “GoLive”. As you type, the list adds the new option. Click OK.

•   To edit an existing option, select a search string from the list, and edit it in the two text boxes. As you type, the list changes the option. Click OK to change the window and save your changes.

•   To delete an existing option, select the search string to be deleted from the list, and click Delete.


Advanced Page Layout Features

About frames

Adding frames to a Web page

Using floating boxes

Using dynamic components

Working with HTML fragments


About frames
Advanced Page Layout Features

About frames

Frames divide a Web browser window into sections that contain separate pages. Using frames, you can make your page layout more visually interesting and help viewers navigate in your Web site.

Since the content of each frame is a separate page (and separate file) with its own URL, it can be changed and scrolled independently of the pages in other frames. For example, you can use frames to create an onscreen navigation aid or table of contents that remains visible while the viewer scrolls through the page in another frame.

A. The left frame contains a navigation page. B. The right frame contains a page that is linked to the navigation page.

You need at least three HTML documents to create a two-frame page layout: one page for the frame set and two pages for the visible content pages. The frame set is the master document that defines the size and location of the frames and specifies the URLs that reference the content pages. You design the content pages to fit or scroll within specific frames in the frame set.

You can set frames to scroll if the content page is larger than the frame and to have visible borders or no borders. You can also set frames to be a fixed size or to resize proportionally when a visitor resizes the browser window.

When working with frames, keep in mind the following browser limitations:

•   Single frame pages do not display in Netscape Navigator and Communicator browsers.

•   Browsers tend to offset the content of a page from the edge of their main display area and from the inner edges of frames by a few pixels. This behavior can cause sizing problems.

•   Nesting frame sets within frame sets is possible but can cause serious navigation problems.


Adding frames to a Web page
Advanced Page Layout Features

Adding frames to a Web page

The Frames tab of the Palette contains a large selection of frame sets that can be dragged to your document window when you want to create a Web page with frames. You can display a preview of the frame content directly in the Frames view, without a browser. You can then make corrections on the spot by double-clicking the frame content or by dragging and dropping an alternative page.

A. Click to switch to the Frames Editor view. B. The name of the frame appears here. C. Icons representing pages that appear in the individual frames. D. Click the separator to select the frame set, or drag it to resize frames relative to each other.

See also:

To create a frame set

To specify frame attributes

To move a frame or a nested frame set

Creating a linked table of contents frame


To create a frame set
Adding frames to a Web page

To create a frame set:

1  Create the HTML pages you want in your frame set. For example, create a page “Content.html” for a table of contents frame, and “Body.html”for a main window.

2  Open a new document window, and click the Frame Editor tab ( [image]) at the top of the window.

3  From the Frames tab ( [image]) of the Palette, drag a frame configuration into your document window.

4  Select the frame set by clicking any of its horizontal or vertical dividers.

5  Set the frame set options in the Frame Set Inspector. (The Size text box is dimmed because a frame set cannot have an absolute size.)

•   Click an Orientation button in the Frame Set Inspector to arrange the dividers in the frame set horizontally or vertically.

•   To resize the border, click any divider in the document window, select the Border Size option, type a value in pixels, and press Enter.

Note: Setting Border Frame to No and Border Size to 0 hides the selected divider.

•   To assign a color to all dividers in the frame set, click any divider in the document window, select the Border Color option, and then drag a color from the Color Palette to the Border Color color field. This color overrides the gray border that most Web browsers display by default.

Note: To color the background of a frame, you must select a background color for the page you want to display in that frame. (See Setting page size, background, and text color.)

6  Click a frame, and give it a descriptive name. (For example, label the left frame “TOC frame” and the right frame “Main.”) Set other frame attributes if needed. (See To specify frame attributes:.)

7  Save the frame set document. Make sure to save it with an .html extension. For example, Frameset.html.

To specify the contents of a frame:

Do one of the following:

•   In the Frame Inspector, drag from the Point and Shoot button ( [image]) to a page in the site window, or to the Page icon ( [image]) next to the title of the target document.

•   Type the desired file name in the URL text box of the Frame Inspector. Click Browse to choose a Web page.

•   Drag URLs from the External tab of the site window. (By using URLs, you can reference resources on remote volumes or servers.)

•   Drag HTML pages from the Files tab of the site window or from the desktop.

To preview the frame set page with its contents:

Click the Preview tab ( [image]) at the top of the document window (Windows), or Frame Preview tab ( [image]) at the top of the document window (Mac OS). You cannot edit in the Preview mode.

Note: Adobe GoLive cannot preview external URLs. You need to test external links with a browser.

To view or edit a page in another window, double-click the page icon in the frame.

See also:

To specify frame attributes

To move a frame or a nested frame set

Creating a linked table of contents frame


To specify frame attributes
Adding frames to a Web page

To specify frame attributes:

1  Select the frame you want to modify.

2  In the Frame Inspector, to specify a size for the frame, do one of the following:

•   Choose Scale from the pop-up Size menu if you want to size the frame automatically when a viewer resizes the browser’s window.

•   Choose Pixel from the Size pop-up menu, and enter the desired size in pixels if you don’t want the frame to be resizable. For example, use this technique if the frame will display a small image of known dimensions.

Note: If you specify an absolute size in pixels for one frame, you must set at least one more frame with the same orientation to Scale, or the frame set scales all frames in that direction.

•   Choose Percent from the Size pop-up menu if you want the frame have a fixed ratio relative to the overall height or width of the frame set. Then use the Size text box to preset a percentage. For frames with horizontal orientation, this attribute controls the relative height. For frames with vertical orientation, it controls the relative width.

•   Choose Pixel or Percent from the Size pop-up menu, and drag the frame border to the desired size.

3  In the Name text box, type in a name for the frame.

4  Select an option from the Scrolling pop-up menu:

•   Auto hides the scrollbar if it isn’t needed and shows it if the content is too large for the frame.

•   Yes shows the scrollbar at all times.

•   No hides the scrollbar.

See also:

To create a frame set

To move a frame or a nested frame set

Creating a linked table of contents frame


To move a frame or a nested frame set
Adding frames to a Web page

To move a frame or a nested frame set:

1  Click and drag to move a frame. Control-click and drag to move a frame set.

Click and drag the frame you want to move to the new location.

As you drag, you’ll notice that the frame orientation limits the direction of motion. You can drag vertical frames sideways and horizontal frames up and down, but you cannot extend the frame set by dragging beyond its boundaries.

2  Release the mouse button when the frame is at the desired location, or when the frame set is at the desired location within the master frame set.

See also:

To create a frame set

To specify frame attributes

Creating a linked table of contents frame


Creating a linked table of contents frame
Adding frames to a Web page

Creating a linked table of contents frame

When you create a frame for a table of contents, you link each item in the contents list and specify a target for each link—that is, you must specify the frame in which the linked page appears.

To create a linked contents frame:

1  Create a frame set and set your table of contents page to appear in one of the frames.

2  Open the contents page and link each item in the contents list to a Web page.

3  In the Link tab of the Text or Image Inspector, set the frame where you want the linked page to appear by choosing an option from the Target pop-up menu:

•   Choosing a frame’s name loads the page in that frame. The frame names of your open frame set appear at the top of the menu.

•   _top loads the page referenced by the link into the full Web browser window, replacing the current frame set entirely. If the current page is already at the top, the page loads into the frame that contains the link.

•   _parent loads the page referenced by the link into the parent of the current document. If the current page has no parent, the target _self is used. (The parent is the next highest frame set in the hierarchy.)

•   _self loads the page referenced by the link into the window or frame that contains the link, replacing the contents page.

•   _blank loads the page referenced by the link into a new unnamed window.

•   Default removes any previously set target for the page.


Using floating boxes
Advanced Page Layout Features

Using floating boxes

Floating boxes let you manipulate page content to create dynamic effects and multilayered displays. Floating boxes let you divide your page into rectangles that you can format individually, fill with HTML content, and stack. The boxes can be opaque or transparent to reveal objects in the background.

Note: To display properly, floating boxes require Web browsers version 4.0 or later. Although floating boxes may soon be used as commonly as HTML tables, viewers with older browsers may have trouble viewing pages that contain floating boxes.

A. The dark box has a background image and contains an animated GIF image. B. The box with the yellow background contains normal HTML text. C. Transparent boxes with colored text, stacked on top of the boxes below.

See also:

About floating boxes

Setting up floating boxes


About floating boxes
Using floating boxes

About floating boxes

Floating boxes are based on the DIV tag, which has been available since HTML 3.2 but not commonly used. HTML 4.0 substantially enhances the DIV tag’s functionality, allowing it to be absolutely positioned, and stacked to accept a background image or background color. The DIV tag is also a core element of Dynamic HTML and a major building block for absolute positioning with cascading style sheets.

Two concepts are key to understanding floating boxes:

•   Layering is a key feature of floating boxes. Floating boxes can overlap or even be placed on top of each other. The stacking order is controlled by an attribute called the z-index (z is from the z-axis in a three-dimensional coordinate system). Elements with a higher z-index display on top of elements with a lower z-index. For example, an element with a z-index of 2 appears to float above an element with a z-index of 1.

By default, floating boxes are superimposed on the normal flow of HTML and the Adobe GoLive layout grid.

•   As an independent division within the page, a floating box accepts any other HTML tag—such as an image or simple HTML text with formatting. It also has the same background image and color properties as an HTML page.


Setting up floating boxes
Using floating boxes

Setting up floating boxes

Floating boxes accept any valid HTML element, including text, images, rules, and any other basic or advanced tags from the Palette. You can also format text and assign attributes in the usual way.

See also:

To set up a floating box

To add text to a floating box


To set up a floating box
Setting up floating boxes

To set up a floating box:

1  Drag the Floating box icon from the Basic tab of the Palette into the document window, or double-click the icon in the Palette.

The small yellow icon labeled SB at the upper left corner of the floating box is the floating box marker. When you change the position of the box, this icon remains at the original point of insertion. You can click this icon to select the floating box unless it is underneath another floating box.

2  Click the border of the floating box to open the Floating Box Inspector.

3  To move the floating box, drag it by its border, or enter exact coordinates (in pixels from the upper left corner of the document window) in the Left and Top text boxes in the Floating Box Inspector.

4  To resize the floating box, enter the desired size in the Width and Height text boxes, or drag any of the resize handles.

5  Enter a value for the z-index of the floating box in the Depth text box if you plan to add more overlapping boxes. Use the z-index (Depth) 1 for the lowest box, 2 for the next box in the stack, and so on.

Assign z-indices whenever you place overlapping floating boxes on the same page to avoid problems when the browser tries to display them.

A. The lowest box has a z-index of 1. B. The box in the middle has a z-index of 2. C. The box at the top has a z-index of 3.

6  If desired, choose a background color or image for the floating box using the procedure described in Adding color.

Note: Netscape Navigator has problems displaying a floating box background image.

See also:

To add text to a floating box


To add text to a floating box
Setting up floating boxes

To add text to a floating box:

1  Click in the floating box. The background of the box turns white unless you have selected a background color or image.

2  Enter text. For more information, see  Creating text.

3  Select the text, and apply the desired formatting using the buttons in the Text toolbar or text formatting commands from the Style and Format menus. For more information, see Formatting text.

To add images or other items to a floating box:

1  Do one of the following:

•   Drag any icon from the Basic tab, Forms tab, Custom tab, or other tab of the Palette to the floating box placeholder in the window.

•   Click inside the floating box, and then double-click the desired item in the Palette.

2  Set up an item or placeholder as desired—for example, use the Point and Shoot feature to link an image placeholder with an image file in the site window.

Note: Netscape Navigator and Internet Explorer may have problems with floating boxes that contain tables or layout grids.

See also:

To set up a floating box


Using dynamic components
Advanced Page Layout Features

Using dynamic components

Dynamic components let you create elements in one source file that you can use on multiple pages. This feature is useful for buttons, logos, headers, and other items that you want to use throughout your site.

See also:

About dynamic components

Setting up dynamic page elements


About dynamic components
Using dynamic components

About dynamic components

You can use Adobe GoLive components to reference other HTML pages and embed them in your page, complete with text, images, and other visual content. When you embed an element as a dynamic component instead of writing the HTML code in your pages, you can change the object simply by double-clicking it to open the source file (an HTML page containing only the element) and then editing the object. When you save the source page, Adobe GoLive automatically updates all pages that contain the element.

Adobe GoLive encloses the embedded HTML page in a custom tag that the browser ignores at runtime (although its content is understood and interpreted correctly), and marks it as dynamic page content that needs to be updated each time the source file changes.

Note: Dynamic components are updated only while you work on your local hard disk. Pages on the Web server are not updated by just uploading the source file. You need to upload all pages that reference a component to update your site after changing the source file.


Setting up dynamic page elements
Using dynamic components

Setting up dynamic page elements

Once you have created your HTML component page, you insert a component placeholder from the Palette and then link the placeholder to the source file.

A. A component is easily identified by its dotted border. B. Link the componentplaceholder with the source file to display its content.

See also:

To create a source file

To make the source file a dynamic component

To edit the source file


To create a source file
Setting up dynamic page elements

To create a source file:

1  In a new document window, click the Page icon ( [image]).

2  Click the HTML tab of the Page Inspector, and click Component to set up the current page for use as a dynamic component.

3  Add the desired content—for example, a layout grid with your corporate logo and headline.

4  Choose File > Save As, and choose Components from the pop-up menu in the lower right (Windows) or at the top (Mac OS) of the Save As dialog box, and then click Save.

The file is saved in the Components subfolder of the site data folder and displays in the Site Extra tab of the Palette and the Extra tab of the site window. For more information on setting up components, see Managing stationery in the site window.

Saving a Component

See also:

To make the source file a dynamic component

To edit the source file


To make the source file a dynamic component
Setting up dynamic page elements

To make the source file a dynamic component:

1  Make sure you that have saved the desired source file. (It does not need to be open.)

2  Do one of the following:

•   Click the Site Extras tab of the Palette, and choose Components from the pop-up menu at the bottom of the window to display components you have saved. Then drag the components into the window. You can also drag from the Extra tab of the site window.

•   Drag the Component icon from the CyberObjects tab ( [image]) of the Palette into your document window, and use the Browse button or the Point and Shoot button ( [image]) in the Component Inspector to link to an HTML page in the site window. If the source file is open, you can also link to the Page icon ( [image]) in the document window of the desired page.

When designing the source file, keep in mind that component placeholders resize automatically when you fill them with content, and they assume the size of the embedded object. Optionally, you can resize the width of component placeholders when you put them on a layout grid.

See also:

To create a source file

To edit the source file


To edit the source file
Setting up dynamic page elements

To edit the source file:

1  Double-click the embedded component to open the source file.

2  Make the desired changes and save the source file. The component is immediately updated in the document window and in all pages that use it.

See also:

To create a source file

To make the source file a dynamic component


Working with HTML fragments
Advanced Page Layout Features

Working with HTML fragments

Adobe GoLive lets you work with HTML fragments—that is, chunks of ready-made HTML code that are not embedded in the default page structure. This feature is useful when several authors work on the same page, because it eliminates the need to strip off redundant HTML when merging code from various sources. HTML fragments are also instrumental in building dynamic pages with WebObjects (see the online manual Using Web Objects).

To create HTML fragments:

1  Choose File > New to create a new document.

2  With the Inspector window open, click the page icon ( [image]) in the upper left corner of the document window. Then click the HTML tab in the Page Inspector.

3  Deselect the appropriate <HTML>, <HEAD>, <TITLE> (if empty), and <BODY> options to partly or completely strip the basic framework off the page.

Deselect the Write Page Tag options to create an HTML fragment.

4  Save the new document, and add your HTML code.


Adding Interactivity with JavaScript, Java Applets, and Plug-ins

About JavaScript and Java applets

Using JavaScript

Adding audio and video clips

Using ActiveX controls

Adding scrolling marquees


About JavaScript and Java applets
Adding Interactivity with JavaScript, Java Applets, and Plug-ins

About JavaScript and Java applets

Java is a programming language; JavaScript is a scripting language. Java allows programmers to write small, stand-alone applications that are translated into machine code. The server stores these Java applets as separate binary files and serves them to the browser for running. JavaScripts, on the other hand, are small fragments of text that are embedded directly in your HTML code. When the browser encounters JavaScript in a Web page, it interprets the script commands and responds accordingly—by prompting the viewer for input, for example.


Using JavaScript
Adding Interactivity with JavaScript, Java Applets, and Plug-ins

Using JavaScript

Built-in support for JavaScript and the JScript derivative lets you add interactivity to your Web pages, verify form input, enhance visual displays, and dynamically control the browser. The integrated Script Editor lets you build scripts in the application, embed them in your page, and test them immediately by launching the targeted browser.

To make it easy for you to add JavaScript, Adobe GoLive provides a complete inventory of building blocks for all major JavaScript dialects and versions. Whenever you insert a script placeholder, you choose the targeted application in the Script Inspector, which then configures the Script Editor accordingly. Combined with the ability of JavaScript to identify browsers, this feature makes it easy for you to build pages with multiplatform support.

Important: Not all browsers implement JavaScript in the same way. Test all JavaScripts on all of your target browsers.

See also:

Setting up JavaScripts

Setting JavaScript preferences

Setting up Java applets

Using Java applets as HTML Containers


Setting up JavaScripts
Using JavaScript

Setting up JavaScripts

You can add JavaScripts to your document page. You can also insert JavaScripts in the head section of your document window that allow a script to be executed while the visible section of the document is still being loaded. After you have inserted a placeholder in the body or head of your Web page, you create the JavaScript in the JavaScript Editor.

See also:

To set up a JavaScript

To edit an existing JavaScript


To set up a JavaScript
Setting up JavaScripts

To set up a JavaScript:

1  Drag the JavaScript icon from the Basic tab ( [image]) of the Palette to your document window, or drag the Script icon from the Head tab ( [image]) of the Palette to the head section pane.

A. JavaScript icon B. Script icon

2  Select the JavaScript icon in the document window, or select the Script icon in the head section pane.

3  In the context-sensitive Inspector, type in a descriptive name in the Name text box. Press Enter.

4  Select a target browser from the Language pop-up menu. The language version corresponding to your browser selection appears in the text box below the menu.

5  To reference an existing script, select Source and type in a resource locator for your script file, click Browse to select a script, or drag from the Point and Shoot button to link to a script in the site window.

See also:

To edit an existing JavaScript


To edit an existing JavaScript
Setting up JavaScripts

To edit an existing JavaScript:

1  To open the JavaScript Editor, do one of the following:

•   Double-click the JavaScript icon in the document window.

•   Select the JavaScript icon in the document window, and click the Edit button in the Inspector.

•   Click the Java bean icon ( [image]) in the upper right of the document window.

The JavaScript Editor works like the other Adobe GoLive text editors. For information on editing shortcuts and buttons, see Working in HTML.

2  If the icons on the JavaScript Editor toolbar are inactive, click New Script Item ( [image]) button.

3  Click the Events tab of the JavaScript Inspector to see the objects that can have events attached and the events they support. To add an event to your script, drag an item from the Events tab to the JavaScript Editor window.

Create event definitions by dragging icons to the JavaScript Editor.

4  Click the Objects tab of the JavaScript Inspector to display the complete inventory of JavaScript objects and methods available. To add an object to your script, drag it from the Objects tab to the JavaScript Editor window.

Click a function declaration in the Functions list box in the Script tab of the JavaScript Inspector window to navigate directly to that location in the script.

5  Close the JavaScript Editor to save your work.

6  Click Show in Browser on the toolbar to open the browser you selected for previewing and testing in the Preferences dialog box. Or choose Special > Show in Default Browser. (For more information, see Previewing pages.)

Note: You cannot preview the effects of a JavaScript script in Preview mode.

This sample JavaScript code shows how to use a simple JavaScript to display the time and date obtained from the viewer’s operating system.

JavaScript sample

•   The document.write() method on the “Your Local Time” line writes an H1-formatted text string from the document to the screen of the browser.

•   new Date()creates a new date object containing the long version of the current date from the viewer’s operating system. This object is assigned to currtime.

•   The last line is output again to the browser’s screen using a document.write() method, with the embedded currtime variable set to the current time and date.

See also:

To set up a JavaScript


Setting JavaScript preferences
Using JavaScript

Setting JavaScript preferences

The JavaScript, font, color, and printing preferences let you customize the settings that control how the Script Editor behaves and appears, and how scripts appear in the Source view.

See also:

To set JavaScript preferences

To set Font preferences

To set Colors preferences (syntax highlighting)

To set Printing preferences


To set JavaScript preferences
Setting JavaScript preferences

To set JavaScript preferences:

1  Choose Edit > Preferences.

2  Select the JavaScript icon ( [image]) in the left pane of the Preferences dialog box.

3  Set the following preferences:

•   Enable Dragging of Marked Text controls internal drag-and-drop support.

•   Auto Indent controls the automatic indenting of lower level script elements.

•   Line Numbers displays line numbers at the left margin of the JavaScript Editor window.

•   Soft Wrap lets the JavaScript code wrap in the JavaScript Editor window when it reaches the right margin of the window.

•   Tab Size sets the width of the indentation (in characters) added when you press the Tab key.

You can preview your settings in the preview pane at the bottom of the Preferences dialog box.

See also:

To set Font preferences

To set Colors preferences (syntax highlighting)

To set Printing preferences


To set Font preferences
Setting JavaScript preferences

To set Font preferences:

1  Choose Edit > Preferences.

2  In the Preferences dialog box, expand the JavaScript preferences in the left pane and select Font.

3  Select a custom font, font size, and style for JavaScript code to override the default setting. This is the font used to display JavaScript code in the JavaScript Editor.

See also:

To set JavaScript preferences

To set Colors preferences (syntax highlighting)

To set Printing preferences


To set Colors preferences (syntax highlighting)
Setting JavaScript preferences

To set Colors preferences (syntax highlighting):

1  Choose Edit > Preferences.

2  In the Preferences dialog box, expand the JavaScript preferences in the left pane and select Colors.

3  Select Enable Syntax Highlighting to determine the default appearance of the different code elements in the JavaScript Editor.

4  To choose a color for each code element, click in the color field for the element, choose a new color, and click OK.

See also:

To set JavaScript preferences

To set Font preferences

To set Printing preferences


To set Printing preferences
Setting JavaScript preferences

To set Printing preferences:

1  Choose Edit > Preferences.

2  In the Preferences dialog box, expand the JavaScript preferences in the left pane and select Printing.

3  Set the following Printing preferences to control the default formatting for hardcopy printouts of the JavaScript code:

•   Use Printer Specific Settings lets you format the hardcopy printout by using syntax highlighting (useful on a color printer), applying bold for HTML tags to make them stand out, and adding line numbers to make individual lines of code easier to refer to.

•   Use Special Font for Printing lets you apply a custom font and style options to hardcopy printing.

See also:

To set JavaScript preferences

To set Font preferences

To set Colors preferences (syntax highlighting)


Setting up Java applets
Using JavaScript

Setting up Java applets

Adobe GoLive lets you insert Java applets on a layout grid or in the flow of HTML code, so that you can add animation or other advanced features to your page. You can play Java applets from within Adobe GoLive, eliminating the need to launch a browser for previewing.

To set up a Java applet:

1  Drag the Java Applet icon from the Basic tab ( [image]) of the Palette to the document window, or double-click the icon in the Palette.

2  To select an applet, click Browse to locate the applet you want, or drag from the Point and Shoot button ( [image]) to link to an applet in the site window.

The name of the code base—that is, the file containing the applet code—appears in the Code text box. The name of the applet appears in the Java applet placeholder in the document window.

Note: With some Java applet generator programs, the .class extension is not added correctly to the CODE attribute. These applets work in the browser, but they won’t display in Adobe GoLive.

3  Name the applet by typing a name not in use by any other object on your page in the Name text box, and press Enter.

4  Resize the applet by dragging the resize handles, or enter Width and Height values in the Inspector, and press Enter.

5  To align an applet with surrounding text when you are not using a layout grid, use the Hspace and Vspace text boxes and the Align pop-up menu. (For more information, see Aligning images with text.)


Using Java applets as HTML Containers
Using JavaScript

Using Java applets as HTML Containers

Adobe GoLive lets you enter alternative text or HTML objects in the Java applet placeholder. The browser displays alternative text if the applet tag is understood but applet loading is turned off; the HTML appears when Java is not supported. By adding images or other HTML objects, you can edit or enrich the text or HTML content of the Java applet.

The Java applet placeholder displays an advisory message enclosed betweentwo HTML line tags.

To display alternative text or HTML within the Java applet placeholder:

1  With the Java applet placeholder selected, click the Alt tab of the Java Applet Inspector.

2  Do one of the following:

•   In the Alt Text text box, type the plain text you would like to display in place of the Java applet.

•   Select Show Alternative HTML. In the document window, type the HTML directly into the applet placeholder, or drag any Body Tags, Forms, or DHTML icons from the Palette to the placeholder.


Adding audio and video clips
Adding Interactivity with JavaScript, Java Applets, and Plug-ins

Adding audio and video clips

Adobe GoLive supports a variety of plug-ins that let browsers play back multimedia over the Web, allowing you to place video and audio clips on your page. For additional information, see the Adobe Web site at www.adobe.com/supportservice/custsupport/SOLUTIONS/18136.htm.

You can place any multimedia element supported by Netscape Navigator or Internet Explorer, including QuickTime, QuickTime VR Components, and Macromedia Flash and Shockwave plug-ins, on your layout grid or in your flow of HTML code. You can preview supported media clips from within Adobe GoLive.

Important: Before uploading QuickTime movies, you must flatten them—that is, convert them to a “Web-compatible” sequential format. For information on preparing movies, see Editing QuickTime Movies.

To set up a plug-in:

1  Drag the Plug-in icon from the Basic tab ( [image]) of the Palette to the document window, or double-click the icon in the Palette.

2  Link and set up the plug-in in the same way as you would a Java applet. For more information, see Setting up Java applets.

See also:

Editing plug-in attributes

Setting plug-in preferences

Customizing interfaces for unknown plug-ins (Mac OS)


Editing plug-in attributes
Adding audio and video clips

Editing plug-in attributes

The Special tab of the Plug-in Inspector automatically changes its name and content to let you edit the attributes of plug-ins that Adobe GoLive supports, such as QuickTime movies. In addition, the Attribs tab of the Plug-in Inspector lets you add, edit, and delete plug-in attributes manually. You can use this tab to edit the attributes of media extensions that Adobe GoLive does not support directly.

Important: Although Adobe has tested all third-party plug-ins and media extensions currently available, no warranty is granted, either implied or expressed, that plug-ins play properly when embedded in your Web pages. Be aware that poorly programmed plug-ins may produce crashes and may damage your files.

See also:

To edit the attributes of plug-ins supported by Adobe GoLive

To edit the attributes of your plug-in manually


To edit the attributes of plug-ins supported by Adobe GoLive
Editing plug-in attributes

To edit the attributes of plug-ins supported by Adobe GoLive:

1  With the Plug-in icon selected, click the far right tab in the Plug-in Inspector (the name of the tab depends on the plug-in).

2  Select the required options:

•   Show Controller to have the browser show or hide the playback controls, such as the Play, Stop, and Rewind buttons.

•   Select Cache to activate caching through the browser when playing back the media item.

•   Select Autoplay to let the browser automatically play back the media item on opening the page.

•   Select Loop to have the browser play the media item in an endless loop.

•   Select Palindrome to have the browser play the media item back and forth in an endless loop.

•   Select Play Every Frame to have the browser play the media item without omitting any frames.

•   If you want to take the viewer to another URL when they click on your movie, select link and enter a URL. Click Browse, or use the Point and Shoot button ( [image]) to link to a resource in the site window. Select a value from the Target pop-up menu. For description of the values, see Creating a linked table of contents frame.

If desired, type in a target frame in the destination frame set or select one from the pop-up menu.

See also:

To edit the attributes of your plug-in manually


To edit the attributes of your plug-in manually
Editing plug-in attributes

To edit the attributes of your plug-in manually:

1  In the Attribs tab of the Plug-in Inspector, click New to add a new attribute. In the left text box below the list box, enter an attribute name, and press Enter. The attribute name appears in the Attribute column of the list box.

2  In the right text box, enter an attribute value, and press Enter. The attribute value appears in the Value column of the list box.

3  To delete an attribute, select the desired entry from the list box, and click Delete.

See also:

To edit the attributes of plug-ins supported by Adobe GoLive


Setting plug-in preferences
Adding audio and video clips

Setting plug-in preferences

The Plug-ins Preferences dialog box lets you assign media file types to the plug-ins currently installed in the Plug-ins folder within your Adobe GoLive program folder. This allows Adobe GoLive to play back media files using the appropriate resources.

To assign a new media file type to a plug-in:

1  Choose Edit > Preferences.

2  Select the Plugins icon.

3  Click New.

4  Enter a media category (type) and a valid MIME type (subtype) in the Mime Type text box. (MIME, or Multipurpose Internet Mail Extension, is a file type identifier for files sent across the Internet.)

5  If Adobe GoLive has the appropriate plug-in, it recognizes the MIME type and assigns the proper plug-in and file extension automatically.

If Adobe GoLive has no equivalent plug-in and the MIME type is not identified, enter the extension as well. Adobe GoLive lets you embed this type of media file, but you won’t be able to play it back in the Reference Inspector.


Customizing interfaces for unknown plug-ins (Mac OS)
Adding audio and video clips

Customizing interfaces for unknown plug-ins (Mac OS)

Adobe GoLive features a customizable interface for unknown media items that lets webmasters and HTML programmers set up new plug-ins and Java applets without having to use an external helper application.

Adobe GoLive writes custom plug-in definition files and automatically accesses them whenever a new instance of that plug-in is created. After you configure unknown media items, you can select them in the document window and edit their attributes in the Plug-in Inspector or Applet Inspector.

To define an unknown plug-in or Java applet:

1  In Layout view, drag a Tag icon (Unknown Start) from the Basic tab ( [image]) of the Palette to your layout grid or document window.

2  In the Tag Inspector, type in CS.UD.INTERFACE in the Tagname text box, and press Enter to initialize the plug-in definition mode.

3  Click the Source tab to switch from Layout to Source view, and then click the Layout tab to switch back to Layout view. This displays an attribute box in the document window. Select the Tag box. In the Userdef Inspector, edit the attribute definitions for the plug-in.

4  From the Type pop-up menu, choose the type of the attribute to be defined:

•   Text lets you define an attribute with any desired text content, such as HEIGHT=100.

•   Link lets you define a hyperlink attribute.

•   Boolean lets you define an attribute with two logical states, such as PLAY = YES/NO.

•   Enumeration lets you define an enumeration—for example, a selection with multiple options, such as ALIGN = Default,Top,Middle,Bottom, and so on.

•   Color lets you define a color attribute, COLOR="#00BFFF", for example.

5  Select Required if the targeted browser needs the attribute you’re defining in order to display the plug-in; leave it deselected if it is an optional attribute.

6  Type the name in the Name text box. This name appears in the document window to identify the attribute box.

7  Type a name in the Vis. Name text box.

8  Type the title in the Title text box.

9  Type an initial value in the Init Value text box. Adobe GoLive sets the attribute to this value whenever it generates a new instance of the plug-in.

10  For an Enumeration attribute with multiple options, type in a list of options in the Values text box, using commas as separators. (Don’t use any intermediate spaces.) For example, ALIGN = Default,Top,Middle,Bottom.

If the enumeration consists of Boolean items, you must enter the TRUE value first. For example, yes, no.

11  Type in one or more descriptive labels in the Labels text box, using commas as separators. Don’t use any intermediate spaces, unless you enclose the list in straight quotes. For example: "/black", "blue", "red".

12  In the Help Text text box, type in a descriptive text.

13  When you have defined the first attribute, Option-drag the attribute box to copy it. Then repeat steps 5 through 13 as required.

14  Continue repeating attribute definitions until you have covered all necessary attributes.

15  Save the definition file, using the same filename as for the plug-in or Java class, but appending .chasm instead of the standard filename extension. You can save the definition file in the same folder as the unknown plug-in media file or Java class, in the Modules subfolder in the Adobe GoLive program folder, or in the Plug-ins subfolder in the Adobe GoLive program folder.

16  Insert a plug-in or applet placeholder, and link it with the media file or applet you have defined. Adobe GoLive displays the newly defined attributes in the Userdef tab of the Plug-in Inspector or Java Applet Inspector.


Using ActiveX controls
Adding Interactivity with JavaScript, Java Applets, and Plug-ins

Using ActiveX controls

Adobe GoLive lets you insert and set up ActiveX controls when the IE Module is installed in the Modules folder within the Adobe GoLive application folder. ActiveX creates interactive Web pages and a subset of OLE (Object Linking and Embedding). It brings OLE-style interaction to the Web and works with Internet Explorer and Netscape 3.0 and later (with a plug-in). For more information, users of Netscape on Windows should contact Netscape.

Unlike Java applets, ActiveX controls are not platform-independent; they are supported primarily by Microsoft Windows environments. On Mac OS, you cannot play them back in Adobe GoLive in Preview mode, nor can you play them back in the Content tab of the File Inspector.

To set up an ActiveX control:

1  Drag the ActiveX control icon from the Basic tab ( [image]) of the Palette to the document window, or double-click the icon in the Palette. You can also drag an ActiveX component from the desktop to the placeholder to import it.

A. ActiveX control icon (Windows) B. ActiveX control icon (Mac OS)

2  Link and set up the ActiveX control in the same way as you would a Java applet. See Setting up Java applets for instructions.

To view the ActiveX component while resizing, Control-drag a corner handle.

See also:

Editing the Special attributes of the ActiveX control

Editing the attributes of the ActiveX control


Editing the Special attributes of the ActiveX control
Using ActiveX controls

Editing the Special attributes of the ActiveX control

The Special Tab of the ActiveX Inspector lets you edit ActiveX-specific properties such as resource locations and link types.

To edit the Special attributes of the ActiveX control:

1  Click the Special tab of the ActiveX Inspector.

2  In the Data text box, type in a resource locator for a data file (or any other valid reference) that must be accessible to the ActiveX control at runtime. Press Enter.

3  In the LinkType text box, specify the link you want the ActiveX control to use when handing over data to its target. Press Enter.

4  In the Target text box, indicate the application or other entity you want to receive data from the ActiveX control. Press Enter.

5  In the Standby text box, type in a status message you want displayed as the ActiveX control loads. Press Enter.


Editing the attributes of the ActiveX control
Using ActiveX controls

Editing the attributes of the ActiveX control

The Attribute tab of the ActiveX Inspector lets you enter and edit ActiveX-specific attributes to ensure compatibility with future releases of Microsoft scripting tools for the Web.

To edit the attributes of your ActiveX control:

1  In the Attribute tab of the ActiveX Inspector, choose New to add a new attribute.

2  Enter an attribute name in the lower left text box, and press Enter. The attribute name appears in the Attribute column of the list box.

3  Enter a default attribute value in the right text box, and press Enter. The attribute value appears in the Value column of the list box.

You can also select an existing attribute from the list box, click Duplicate, and edit the attribute name and value text boxes.

4  To delete an attribute, select the desired entry from the list box, and click Delete. (See Editing plug-in attributes.)


Adding scrolling marquees
Adding Interactivity with JavaScript, Java Applets, and Plug-ins

Adding scrolling marquees

The Marquee feature is an HTML tag that lets you place a scrolling message on your Web page when the IE Module is installed in the Adobe GoLive Modules folder in the application folder. You select the scrolling behavior in a dedicated Marquee Inspector window.

Note: The Scrolling Marquee feature is an Internet Explorer extension that does not work in Netscape. Preview the scrolling marquee in Adobe GoLive or in your Internet Explorer browser to make sure that it behaves as desired.

To set up a scrolling marquee:

1  Drag the Marquee icon from the Basic tab ( [image]) of the Palette to the document window, or double-click the icon in the Palette.

2  Set up the marquee in the same way as you would a Java applet. See Setting up Java applets for instructions.

3  To assign a background color to the scrolling marquee, drag a color from the Color Palette or Site Colors tab of the site window to the BG Color field.

4  In the Text text box, type the desired text message for the marquee.

If you want to control the font and style of the marquee text on a layout grid, place the marquee in a layout text box.

To set the properties of the scrolling message:

1  In the Scrolling tab in the Marquee Inspector, select an option from the Behavior pop-up menu:

•   Scroll causes the message to scroll continuously.

•   Slide moves the message into the marquee box and keeps it on-screen.

•   Alternate moves the message into the marquee box and bounces it between the edges.

2  To determine how long the marquee is visible, do one of the following:

•   Select Forever, to make the message scroll continuously.

•   Enter a required number of repetitions in the Loops text box, and press Enter.

3  Enter the desired scrolling speed in the Amount text box (the scrolling speed is measured in pixels between each scrolling amount in milliseconds), and press Enter.

4  Enter the scrolling delay in the Delay text box, and press Enter.

5  Select Left or Right to determine the scrolling direction.


Using Dynamic HTML

About dynamic HTML

Adding date and time stamps

Creating mouse rollovers

Creating a URL pop-up

Inserting head action items

Inserting inline action items

Creating a browser switch

Animating a Web page

Using actions

Shifting Code to an External Library


About dynamic HTML
Using Dynamic HTML

About dynamic HTML

Although the dynamic HTML (DHTML) tools that Adobe GoLive offers rely on JavaScript and cascading style sheets, building animated pages with Adobe GoLive does not require any programming skills or specific editors that rely on browser plug-ins. Whenever you insert a DHTML object, Adobe GoLive either does all the scripting for you automatically, or lets you choose a script-based action. You can build animated pages with drag-and-drop ease—and then watch your Web presentation come alive in your Web browser.

When you insert a dynamic object, Adobe GoLive automatically inserts the appropriate JavaScript code to ensure that your animation displays properly in all 4.0 Web browsers.

In Adobe GoLive you work with DHTML in three ways:

•   You can use Adobe GoLive CyberObjects to create effects such as mouse rollovers, URL pop-up menus, and time and date stamps. Or, use a prebuilt CyberObject to trigger an action when a page loads in a Web browser.

•   You can add content to floating boxes and animate the floating boxes on your page.

•   You can also define actions triggered by viewers interaction like mouse clicks.

In addition, you can use Adobe GoLive scripted actions with CyberObjects and with floating box animations. See Using actions for complete information on using Adobe GoLive Actions.


Adding date and time stamps
Using Dynamic HTML

Adding date and time stamps

The Date and Time feature lets you add a date and time stamp—for example, at the bottom of your page—letting viewers see when your site was last changed.

Adobe GoLive reads the current date and time of day from your computer’s built-in real-time clock and writes the result in a custom tag. It then updates the date and time information dynamically whenever you save the page.

To insert a date and time stamp:

1  If you want descriptive text before the date or time stamp (for example “Last revised:”), type the text.

2  Drag the Date and Time icon from the CyberObjects tab ( [image]) in the Palette to the place in the document window where you want the date or time stamp.

3  Set up the date format in the Date and Time Inspector:

•   Choose the U.S. option from the Format menu in the Date and Time Inspector, or choose any other of the numerous country-specific date and time formats if your page contains material in a foreign language.

•   Select a format for the date and time item you have added—for example, 1/28/98.

4  To add a time stamp, type in a separator if desired (for example, “at ”); then drag another Date and Time icon from the CyberObjects tab to the place in the document window where you want the time stamp.

5  Choose a time format in the Date and Time Inspectors—for example, 5:43:07 PM.

6  Save your page. The date and time stamp displays the exact time when you used the save command.


Creating mouse rollovers
Using Dynamic HTML

Creating mouse rollovers

The Button Image object lets you add mouse rollover button images to your page, which change when the pointer moves over them. You can use these buttons as animated navigation controls, or to let viewers control animations.

See also:

Creating a rollover button

To insert and animate a button image

To link a button image to another location

To display a message at the bottom of the browser window as the pointer moves over the button

Attaching actions to a button image


Creating a rollover button
Creating mouse rollovers

Creating a rollover button:

The animation effect occurs by instructing the browser to toggle between two (or three) slightly different images of the same button. You can easily create these images in Adobe Photoshop or Adobe ImageStyler.

Note: The images must be exactly the same size or you won’t get consistent results in all browsers.

Basic button image. Mouse pointer over the button.

The first image determines the normal appearance of the button, that is, how it looks while the mouse pointer is anywhere else on the page. The second image is a highlighted button that shows when the mouse pointer is on top. The third image appears when the button is clicked. You can use the button image as a hyperlink to another location, provide text that displays in the Web browser as the viewer moves over the button, and assign a prebuilt Adobe GoLive action to the button.

Adobe GoLive inserts a custom tag that serves as a container for the images plus a JavaScript that switches its content, depending on the current location of the mouse pointer. Adobe GoLive automatically loads all the rollover images when the page loads in a Web browser.


To insert and animate a button image
Creating mouse rollovers

To insert and animate a button image:

1  Drag the Button Image icon from the CyberObjects tab ( [image]) in the Palette to your document.

2  In the Button Inspector, enter a unique button designator in the Name text box.

3  To select a main image for the button, click the Main Image icon, and click Browse to select an image or drag from the Point and Shoot icon to an image in the site window.

4  To select an image for when the mouse pointer is over the button, click the Over Image icon, select the option next to the file selection text box, and select the image.

5  To select an image for when the button is clicked, click the Click image icon, select the option next to the file selection text box, and select the image.

You can also use drag-and-drop to assign the three button images: First drag the main image from the site window or a folder to the button image icon in the document window. Alt-drag (Windows) or Option-drag (Mac OS) a second image to assign the mouse-over image; Shift-drag to assign the on-click image. All images should be the same size.

See also:

Creating a rollover button

To link a button image to another location

To display a message at the bottom of the browser window as the pointer moves over the button

Attaching actions to a button image


To link a button image to another location
Creating mouse rollovers

To link a button image to another location:

Click the Status and Link tab in the Button Inspector, select the option next to the URL text box, and type a Universal Resource Locator in the text box. You can also use the Browse button or Point and Shoot to select a link destination. See Linking pages.

See also:

Creating a rollover button

To insert and animate a button image

To display a message at the bottom of the browser window as the pointer moves over the button

Attaching actions to a button image


To display a message at the bottom of the browser window as the pointer moves over the button
Creating mouse rollovers

To display a message at the bottom of the browser window as the pointer moves over the button:

Click the Status and Link tab of the Button Inspector. Select the option next to the Status text box, and enter the text you want in the browser window and press Enter. To test the effect, preview the page in a Web browser.

See also:

Creating a rollover button

To insert and animate a button image

To link a button image to another location

Attaching actions to a button image


Attaching actions to a button image
Creating mouse rollovers

Attaching actions to a button image

The Actions tab of the Button Inspector lets you attach scripted actions to the button image—for example, an action that changes the background color of the page.

Note: Make sure that all button images on a page have a unique name (button1, button2, etc.). Names that contain only numbers (1, 2, 3, etc.) won’t work in all browsers.

To attach an action triggered by a mouse or key event:

1  Click the Actions tab of the Button Inspector.

2  Choose a mouse or key event from the list box to the left:

•   Select Mouse Click to have a single mouse click trigger the action.

•   Select Mouse Enter to have the action triggered when the mouse pointer moves over the button.

•   Select Mouse Exit to have the action triggered when the mouse pointer moves off the button.

3  Click the + button to add an action placeholder to the Actions list box to the right.

4  Choose an action from the Actions menu (see Using actions for a complete reference of the actions that Adobe GoLive supports).

Note: Attaching an action deactivates the functionality of the URL option in the Link tab of the Button Image Inspector.

5  Edit the action options. For example, if you are using the Set BackColor action, click the Background Color field, select a color from the Color Palette, and then drag it from the preview pane of the Color Palette to the color field.

6  Launch a 4.0 browser to preview the action. (The 3.0 browsers support some actions. Browser compatibility information appears next to the name of each action.)


Creating a URL pop-up
Using Dynamic HTML

Creating a URL pop-up

The URL Pop-up item inserts a pop-up menu with Web sites or local pages that offers shortcuts to other locations on the Web. You can add as many destinations as necessary and edit both their labels and their URLs.

To insert and edit a URL pop-up menu:

1  Drag the URL Pop-up icon from the CyberObjects tab ( [image]) of the Palette to your document.

2  In the URL Pop-up Inspector, click New to create a new menu item.

3  In the Label text box, enter a label that viewers will see in the pop-up menu.

4  Enter a URL of a site on the Web or the path and filename of a local page, or click Browse or use Point and Shoot to select a destination.

5  Create additional menu items. You can select an item in the list, click Duplicate and then edit the item.

6  To change the position of an item in the pop-up menu, select it in the list box; then use the Up and Down arrow buttons next to the scroll bar to shift it to the desired position.

7  To remove an item, select it and press Delete.

8  To make the new URL appear in a frame set, click the Detail tab of the URL Pop-up Inspector and use the target text box or pop-up menu to specify the window or frame where you want the URL to appear.

9  Preview the pop-up menu in your browser to verify that its links work.


Inserting head action items
Using Dynamic HTML

Inserting head action items

The Action Headitem element inserts a script into the header of the document to trigger a user-selectable action before or after the browser loads the body of the page.

To insert and edit an action item:

1  Drag the Action Headitem icon from the CyberObjects tab ( [image]) of the Palette to the head section of your document.

If the head section is not open, drag the Action Headitem icon to the small triangle directly below the Layout tab; when the head section opens drop the icon.

2  Set up the action in the Action Inspector.

•   Choose an action trigger from the Exec. pop-up menu.

•   Choose the action from the Action pop-up menu and set the action’s properties.

For instructions on using individual actions, see Using actions.

Choose an action to be triggered by the action item.


Inserting inline action items
Using Dynamic HTML

Inserting inline action items

The Inline Action Item element inserts a script item in the body of the page that serves as a placeholder for HTML code that triggers when the browser loads the body section. The action will occur when the browser reaches this position when parsing the document.

To insert and edit an inline action item:

1  Drag the Inline Action Item icon from the CyberObjects tab ( [image]) of the Palette to the body section of your document.

2  In the Inline Action Inspector, choose the Document Write action (see Document Write) from the Message submenu of the Actions menu and set it up as desired.

3  Preview the action in a 4.0 browser (see Previewing pages).


Creating a browser switch
Using Dynamic HTML

Creating a browser switch

The Browser Switch Head element inserts a script into the head section of the document that reads the application name and version of each browser trying to access the page and switches to an alternate page if the browser version isn’t compatible. For example, you can use this feature to have a 3.0 browser switch to another page if the current page contains animations that only 4.0 browsers can play back.

Note: Browser switch doesn’t work with 2.0 browsers or Internet Explorer 3.01 in Mac OS.

To insert and edit a Browser Switch Item:

1  Drag the Browser Switch Headitem icon from the CyberObjects tab ( [image]) of the Palette to the head section of your document.

If the head section is not open, drag the Browser Switch Headitem icon to the small triangle directly below the Layout tab; when the head section opens drop the icon.

2  In the Browser Switch Inspector, select the browsers that support the dynamic HTML features used on your page:

•   Select Auto to have Adobe GoLive determine browser compatibility. For example, if your page contains DHTML animations or cascading style sheets formatting, Adobe GoLive checks only the 4.0 and 5.0 versions and configures the script to reroute requests from 3.0 browsers.

•   If you do not select Auto, you need to select options for both Windows and Mac OS. Use the Supported Platform pop-up, and make choices for both platforms.

•   If you know which browsers are incompatible, deselect Auto and the browsers that can’t display the page without errors.

3  Type the path and filename of the alternate page in the Alternate Link text box, or click Browse to navigate to the page. You can also use Point and Shoot to link to a page in the Site window. Be sure to include a browser incompatibility message in the alternate page, such as “Please download a newer browser version to view the original page.”

4  When you finish, test-view the page with an incompatible browser and check whether the request is correctly rerouted.


Animating a Web page
Using Dynamic HTML

Animating a Web page

Adobe GoLive’s advanced animation tools let you create full-scale animations to maximize the visual impact of your pages. You can move objects along linear, curved, or random zig-zag animation paths. You can hide them temporarily, and change their stacking order. By combining all those features, you can produce amazing visual effects—for example, display two items that seem to revolve around each other.

You use the TimeLine Editor to set keyframes and paths for animated objects.

A. Time cursor B. Autoplay button C. Scenes popup menu D. Actions Track E. Time tracks F. Keyframe G. Loop and Palindrome controls  H. Playback buttons I. Frames per second

Before using the TimeLine Editor, you need to understand some basic animation concepts:

See also:

Scenes

Frames

Keyframes

Time tracks

Actions

Creating an object to animate

Animating a floating box

Managing multiple floating boxes

Using the stacking order to simulate relative motion

Controlling the visibility of floating boxes

Inserting actions in an animation

Creating multiple scenes

Controlling the playback of a scene


Scenes
Animating a Web page

Scenes

Enable Web authors to include multiple animations in the same Web page. All scenes share the same document and TimeLine Editor windows. You can create multiple scenes for each page and have them play back automatically (default), trigger them using scripted actions, or provide buttons for the viewer to click.


Frames
Animating a Web page

Frames

Are the individual pictorial units of an animation. As used in connection with video display systems, frames are images that are played back in a rapid sequence to create a visual effect of motion. The number of frames per second (FPS) controls the animation’s playback speed. The more frames per second you assign to an animation, the smoother the impression of fluid motion. However, if you exceed the capabilities of the viewer’s computer, frames will be skipped.


Keyframes
Animating a Web page

Keyframes

Mark points on the time track of an animation sequence at which some specific change in property occurs. These points include changes in direction within the animation path as well as modifications of general properties, such as visibility and stacking order. For each keyframe, you can control the position of the associated floating box by dragging it to the desired location in the document window. Also, the distance between two keyframes determines the playback speed: The shorter the distance, the faster the animation will play back and vice versa.


Time tracks
Animating a Web page

Time tracks

Let you insert keyframes in a dedicated time track for each floating box, and adjust its timing and location. Each single track accepts multiple keyframes, which you can place where you want.


Actions
Animating a Web page

Actions

Are ready-to-use scripts that you can use with the TimeLine Editor, button images, and any links. Actions allow you to add sound, trigger the playback of scenes, dynamically change the content of images, and control other processes in the browser window. You can select them in the Action Inspector, or if attached to an image or text, in the Actions tab of the Button and Text Inspectors.


Creating an object to animate
Animating a Web page

Creating an object to animate

Any object you want to animate must be enclosed in a floating box. Generally, you can insert any item from the Palette that goes into the body section of a Web page. (Tables and layout grids may cause problems in some browsers.) To provide content for an animation, consider transparent GIF images (also known as GIF 89a) as your first choice. Transparent GIFs create a very lively impression of motion because they don’t conceal what is underneath them while moving across the page. Also suitable are normal GIFs or formatted text. You can also choose an opaque background color or background image if you don’t want the floating box to be transparent.

Technically speaking, a floating box is a visual representation of a DIV tag formatted with a CSS ID style. The ID style specifies the width, visibility, and absolute position of the floating box, instructing the browser to create a subdivision that is not part of the normal flow of HTML code within the page. This property of being absolutely positioned allows floating boxes to be moved.

To set up an object to animate, first you insert the floating box in your page, and then you set the properties of the box and add content to it.

See also:

To insert a floating box and add content

To change a floating box background from transparent to an opaque color

To display a background image in the floating box


To insert a floating box and add content
Creating an object to animate

To insert a floating box and add content:

1  Drag the Floating Box icon from the Basic tab ( [image]) of the Palette to any location in the document window.

You can also double-click the Floating Box icon in the Palette to insert a floating box in the upper left corner of the document window.

2  Drag any object from the Palette directly to the content area.

For example, to add an image that you want to float across the page, drag the Image icon from the Basic tab ( [image]) of the Palette to the floating box. (Do not drag-and-drop an image file directly into the floating box. If you do, you will create a background image that will not display in Netscape.)

Floating box without content and floating box with image placeholder

Note: Avoid placing tables and layout grids in a floating box. Inconsistent results, including browser crashes may occur. Also, an intermittent bug in Netscape 4.0 browsers may cause the content of an animated floating box to temporarily disappear, especially if the content is an image button. Here is a simple workaround: Click the content area and insert a nonbreaking space [press Alt-space (Windows) or Option-space (Mac OS)] before the image button.

You can enter text by clicking the content area of the outline of the floating box and typing. When you have finished typing, select the text and use the options in the Text Toolbar or the Format and Style menus (see Formatting text) to format the text.

3  Resize the floating box to fit the content by clicking a resize handle and dragging, or by specifying the size in the Width and Height text boxes of the Floating Box Inspector.

4  Enter a name for the floating box, in the Name text box and press Enter. If you are using several floating boxes within your animation, a unique name makes them easier to identify. (Make sure not to name them with just a number.) If you don’t specify a name, Adobe GoLive names all subsequent floating boxes Layer, Layer 2, Layer 3, and so on.

See also:

To change a floating box background from transparent to an opaque color

To display a background image in the floating box


To change a floating box background from transparent to an opaque color
Creating an object to animate

To change a floating box background from transparent to an opaque color:

1  With the floating box selected, click the color field in the Floating Box Inspector to open the Color Palette (if it is closed).

2  Select a color from any tab of the Color Palette (preferably a Web-safe color) and drag it from the preview pane of the Color Palette to the color field in the Floating Box Inspector.

See also:

To insert a floating box and add content

To display a background image in the floating box


To display a background image in the floating box
Creating an object to animate

To display a background image in the floating box:

1  With the floating box selected, select the BGImage option in the Inspector. An Empty Reference entry appears in the Image text box, prompting you to select an image.

2  Use Point and Shoot to link to an image file in the site window, type in the image filename (including the relative path to the folder), or click the Browse button to select an image in the subsequent file selection dialog.

Note: Avoid using a background image alone in a floating box. In Netscape Communicator, the background image may not display.

See also:

To insert a floating box and add content

To change a floating box background from transparent to an opaque color


Animating a floating box
Animating a Web page

Animating a floating box

To animate a floating box, you place keyframes. Each keyframe is associated with a position relative to the upper left corner of the document window. This position represents the location of the floating box at a particular time while the animation plays back. You adjust the position by dragging the floating box to the desired location.

To animate a floating box, you:

•   Insert a new keyframe in the TimeLine Editor.

•   Specify a position associated with the new keyframe.

•   Select the shape of the animation path in the Floating Box Inspector.

Instead of inserting keyframes one by one and specifying their positions, you can also record an animation path by pressing the Record button and moving a floating box on your page.

See also:

To insert a new keyframe

To specify the position of the floating box for a keyframe

To specify the shape of the animation path

To record an animation path


To insert a new keyframe
Animating a floating box

To insert a new keyframe:

1  Select the floating box in the document window, by clicking either its outline, its small yellow marker, or its name in the Floating Box Controller.

2  Open the TimeLine Editor by clicking the TimeLine Editor button ( [image]) in the head section pane above the main content area of the document window. Initially, the TimeLine Editor window contains only one time track with a single keyframe.

3  Ctrl-click (Windows) or Command-click (Mac OS) at the desired position on the time track to insert a new keyframe. You can also Alt-click (Windows) or Option-click (Mac OS) the initial keyframe and drag to the desired position on the time track, moving the time cursor as you drag.

A.The left and right locators mark the beginning and the end of the play range. B. Alt-click (Windows) or Option-click (Mac OS) the first keyframe, and then drag to the desired position to create a new keyframe. C. The counter indicates the position of the keyframe in seconds and frames. D. The Time cursor follows as you drag, stopping at the position where you drop the new keyframe.

The new keyframe marks the end of the play range. This is indicated by the right play range locator ( [image]), which follows as you drag the keyframe. If you insert more keyframes, the keyframe farthest to the right always limits the play range.

See also:

To specify the position of the floating box for a keyframe

To specify the shape of the animation path

To record an animation path


To specify the position of the floating box for a keyframe
Animating a floating box

To specify the position of the floating box for a keyframe:

1  Click the keyframe to select it; then go to the document window and drag the floating box to the position where you want it to appear for the keyframe. You can also enter the desired position in the Left and Top text boxes of the Floating Box Inspector.

A. Starting point of the animation, as marked by the first keyframe B. End point of the animation, as marked by the new keyframe at 20 seconds

2  Click the first keyframe. The floating box returns to its start position. (You can change its position as described in step 1.)

3  Click the Play button ( [image]) at the bottom of the TimeLine Editor to preview your animation. The floating box travels across the document window and stops where you set the last keyframe.

4  The time cursor also stops at the right play range locator ( [image]). Click the Stop button ( [image]) to reset the time cursor to 0, or use the Backward button ( [image]) to return the time cursor.

5  If desired, use the Loop and Palindrome buttons in the lower left corner of the TimeLine Editor window to control the looping behavior:

•   The Loop button ( [image]) plays your animation in a simple endless loop. When reaching the end point of the animation path, the floating box jumps back to the start and resumes traveling, repeating this cycle infinitely.

•   The Palindrome button ( [image]) causes the floating box to bounce back and forth between the start and end points of the animation path. (The Loop button must be clicked to activate the Palindrome button.)

6  To change the playback speed, select another option from the FPS menu at the bottom of the TimeLine Editor. Most browsers can handle the default 15 FPS setting, even if running on systems with average video hardware. If you want to work with higher speeds, be sure to test your animation with a wide selection of system configurations to make sure that playback is smooth.

You can quickly add a keyframe between two existing keyframes and set the floating box’s position for the frame. In the TimeLine Editor, drag the time cursor to the position in the TimeLine where you want to insert the new keyframe. The floating box moves to that position in the path. Alt-click (Windows) or Option-click (Mac OS) the edge of the floating box and then drag it to a new position.

See also:

To insert a new keyframe

To specify the shape of the animation path

To record an animation path


To specify the shape of the animation path
Animating a floating box

To specify the shape of the animation path:

1  Ctrl-click (Windows) or Command-click (Mac OS) to set the ending position of an animation path by adding a new keyframe in the TimeLine. Then move the floating box into position for the keyframe.

2  Ctrl-click (Windows) or Command-click (Mac OS) in the TimeLine Editor to insert a new keyframe between the two existing keyframes.

3  Click the middle keyframe to select it, and then drag the floating box to the position where you want it to appear.

A. Inserting a keyframe in the middle subdivides the animation path into two sections. B. The new keyframe at 10 seconds marks the middle point of the animation.

4  To alter the shape of the path between a keyframe and the next keyframe, select a keyframe and then choose a shape option from the Animation menu in the Floating Box Inspector. Linear is the default path shape, Curve creates a smooth curve between keyframes, and None makes the floating box jump between the keyframes.

5  Click the Play button ( [image]) in the TimeLine Editor to preview your animation.

You can select multiple keyframes by Shift-clicking them, drag-selecting, or choosing Edit > Select All; then apply a common setting, such as a curved animation path.

See also:

To insert a new keyframe

To specify the position of the floating box for a keyframe

To record an animation path


To record an animation path
Animating a floating box

To record an animation path:

1  Open the TimeLine Editor and begin with the initial keyframe.

2  Click the Record button ( [image]) in the Floating Box Inspector.

3  In the document window, drag the floating box along the desired path. A keyframe appears at each major turn in the path.

4  Click each keyframe and correct the position.

See also:

To insert a new keyframe

To specify the position of the floating box for a keyframe

To specify the shape of the animation path


Managing multiple floating boxes
Animating a Web page

Managing multiple floating boxes

To animate multiple objects on the same page, you use multiple floating boxes. As you add a floating box, Adobe GoLive stacks them in the order you insert them and adds a new time track in the TimeLine Editor. You animate each floating box separately by inserting keyframes in its time track and positioning the floating box in the document window.

A. Floating box travels along a curved path. B. Floating box travels along a linear path.

A. The small arrow indicates the time track that contains the currently selected keyframe. B. The bold outline indicates that the keyframe is currently selected.

The time track in the TimeLine Editor represents the motion of a floating box over time (always from left to right), not the direction of motion in the document window. You determine that direction by clicking all keyframes successively and dragging the floating box to a new position within the document window. For example, by selecting the first keyframe in a time track and dragging the floating box to the right edge of the window, you specify that the animation is to start from the right side of the browser window. When you preview the animation, don’t be confused by the opposing directions of motion in the two windows.

Adjusting the stacking order of floating boxes lets you to set how floating boxes move over other floating boxes on the page. See Using the stacking order to simulate relative motion.

The Floating Box Controller window helps you manage multiple layered floating boxes in your document window by showing or hiding and locking or unlocking boxes temporarily.

Note: The settings in the Floating Box Controller are only temporary and will be overridden when you click the Play button in the TimeLine Editor or switch document views.

To manage multiple floating boxes in a document window:

1  Choose View (Windows) or Window (Mac OS) > Floating Box Controller. The Floating Box Controller lists the floating boxes present in the active window.

A. Click the eye icon to hide or show the content of a floating box. B. Click the “pen” icon to lock or unlock a floating box. C. Click the name to bring a floating box to the foreground. D. Locks the floating box in editing view

2  Click the name (Layer, Layer 1, etc.) to activate a floating box in the document window for editing and bring it to the front. Clicking the name of a floating box temporarily overrides the hide/show and lock/unlock statuses in the following steps.

3  Click the eye icon to hide or show the content of a floating box, or Control-click any eye icon to hide or show all floating boxes at once, as follows:

•   Dimmed eye icon indicates that the floating box is invisible.

•   Black indicates that the floating box is visible.

•   Red indicates that the temporary show/hide settings made in the Floating Box Controller conflict with the current visibility status of the floating box (see Controlling the visibility of floating boxes), as set in the Floating Box Inspector for a particular keyframe. For example, the eye icon is red if you have hidden a floating box in the Floating Box Controller that is supposed to be visible in the animation.

Note: Red indicates a conflict rather than an error. Your animation will play back without any problems.

4  Click the pen icon to lock or unlock a floating box, or Control-click any pen icon to lock or unlock all floating boxes at once. When locked, the pen icon is dimmed in the Floating Box Controller, and you cannot drag the floating box or edit its content in the document window.

5  The padlock icon in the upper right corner of the Floating Box Controller lets you preserve all temporary hide/show and lock/unlock settings when you click the Play button in the TimeLine Editor or switch views—for example, from Layout to Source and back.


Using the stacking order to simulate relative motion
Animating a Web page

Using the stacking order to simulate relative motion

The stacking order, also known as the z-index, is a unique property of floating boxes. In animations with multiple objects, you can use this property to determine which object should appear on top when the paths of two or more floating boxes cross. You can also use the stacking order to simulate more complex effects of relative motion—for example, by letting one floating box revolve around another.

Like the other floating box properties, you can control the stacking order for the time span between any two keyframes on the same time track. To produce the visual effect of stacking, however, this property must be set for at least two synchronous or overlapping time spans on two different time tracks within the same scene.

The following example is based on a simple animation that simulates relative motion. It is a palindrome that consists of two objects; a stationary floating box with a GIF image and an animated floating box with text content. Four keyframes, each on two time tracks, control the animation, subdividing it in four phases. The test box remains on top until the final phase, when it moves behind and is hidden by the image box.

1. First keyframe position 2. Second keyframe position 3. Third keyframe position 4. Fouth keyframe position

To create an animation with one stationary object and an animated object revolving around it:

1  Insert two floating boxes and add content—for example, an image to one box and formatted text to the other.

2  Select the image box and place four keyframes on its time track in the TimeLine Editor.

3  To make the image box stationary, select the first keyframe of the image box; then drag the image box to a convenient location—for example, the center of the page. Now add three more keyframes, making a total of four. The image box serves as the pivot point, so it must remain stationary.

4  The position should be the same for all four keyframes, and will prevent the image box from jumping during playback. If in doubt, click all four keyframes to check the positions in the Top and Left text boxes of the Floating Box Inspector. Correct any pixel offset by hand-editing the top and left coordinates for each keyframe, if necessary.

5  Click the Loop ( [image]) and Palindrome ( [image]) buttons in the TimeLine Editor to play the animation in an endless loop.

6  Click the Play button ( [image]) to preview the stationary object. The image box shouldn’t move. If any motion occurs, return to step 4 and correct the Top and Left coordinates. Now, you’ll insert four keyframes and assign text box positions to them.

7  Select the text box and insert four keyframes on its time track in the TimeLine Editor. Place each keyframe directly below the image box keyframes to synchronize them, like the following illustration.

Two time tracks in the TimeLine Editor. Each holds four keyframes.

8  Position the text box relative to the image box:

•   Select the first keyframe of the text box; then drag the text box to a position to the left of the image box, aligning it vertically with the center of the image box.

•   Select the second keyframe of the text box; then drag the text box horizontally on top of the image box.

•   Select the third keyframe of the text box; then drag the text box horizontally to the right of the image box.

•   Select the last keyframe of the text box, then drag the text box horizontally on top of the image box.

9  Define the stacking order for all four keyframes, both for the text box and image box.

•   Select the first keyframe of the text box. In the Floating Box Inspector, enter 2 in the Depth text box.

•   Select the first keyframe of the image box. In the Floating Box Inspector enter 1 in the Depth text box.

A. Current coordinates B. Selects the shape of the animation path C. Selects a keyframe color D. Sets the stacking order E. Sets visibility

10  Repeat step 9 for the second and third keyframes to stack the text box on top of the image box.

11  Reverse the stacking order for the time span after the last keyframe:

•   Select the last keyframe of the text box in the Floating Box Inspector and enter 1 in the Depth text box.

•   Select the last keyframe of the image box. Enter 2 in the Depth text box of the Floating Box Inspector.

12  Click the Play button ( [image]) to preview your animation. On returning from the farthest right point of the animation path, the text box should disappear behind the image box.


Controlling the visibility of floating boxes
Animating a Web page

Controlling the visibility of floating boxes

The visibility property lets you hide an object during the time span between any two keyframes. Invisible floating boxes offer three major benefits:

•   You can make objects appear suddenly, to create a more lively impression of your animation.

•   In animations with multiple images, you can hide all the images until the animation is completely loaded in the viewer’s browser. This avoids the problems of the playback beginning before the browser has all the information to play smoothly.

•   As a good practice, you can hide an image when you use an action to switch the image content of an image in an animated scene. If the image remains visible, this may cause choppy animation while the browser is downloading the new image from the Web server.

To hide a floating box from view:

1  Click the keyframe from which you want to hide the floating box. In the Floating Box Inspector, deselect the Visible option.

2  If desired, repeat the step for additional keyframes.

3  Click the Play button ( [image]) to preview your animation. The floating box should disappear temporarily.


Inserting actions in an animation
Animating a Web page

Inserting actions in an animation

The Actions Track in the TimeLine Editor lets you Ctrl-click (Windows) or Command-click (Mac OS) to insert action markers. You can connect these markers with scripted actions available from the Actions menu in the companion Action Inspector. For instructions on using actions with the TimeLine Editor, see Using actions.

Note: You can use the action track of pages that don’t have floating boxes.


Creating multiple scenes
Animating a Web page

Creating multiple scenes

The TimeLine Editor lets you save multiple scenes with a document. All scenes share the same document window, the same floating boxes. Scenes make your animations more flexible. You can play them back simultaneously, one after the other, or start and stop individual scenes through scripted actions. You can have the browser autoload scenes (the default), use scripted actions to trigger playback, or let the viewer select a scene by clicking a button.

Be sure you don’t try to control the same floating box from two scenes simultaneously. We recommend using only one scene whenever possible. Scenes are a powerful tool, but you can create overly complex animations.

To create multiple scenes:

1  Create an animation. Adobe GoLive names the first animation you create in a document Scene 1 by default.

2  In the upper left corner of the TimeLine Editor, Choose Scenes > New Scene. Enter a name for the scene and click OK.

The time tracks in the TimeLine Editor don’t change. The keyframes for the first animation are used in the first scene you have created. Leave them unchanged as you work on Scene 2. (To edit them, go to the Scenes menu and switch back to the first scene.)

3  Add and animate floating boxes for the new scene, and then preview the entire animation by clicking the Play button in the TimeLine Editor.


Controlling the playback of a scene
Animating a Web page

Controlling the playback of a scene

If you create two scenes, you can coordinate playback. By default, scenes are set to Autoplay—that is, all scenes play back after the browser finishes loading the page. To play scenes back one by one, instruct the browser to switch to the second scene after the first has completed playing back. Turn off the autoplay option for the second scene and insert a Play Scene action on the Actions Track of the first scene. (If the first scene is a looped animation or palindrome, you may need to insert a Play Scene action followed by a Stop Scene action.)

To have the browser switch to a second scene during playback:

1  Go to Scene 2 and click the Autoplay button ( [image]) to disable automatic playback.

2  Return to Scene 1, and Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track anywhere before the last keyframe position to insert an action marker (indicated by a question mark icon ( [image]).

3  In the Action Inspector, choose Actions > Play Scene and enter the name of the scene in the Name text box.

The Play Scene action instructs the browser to switch to the specified scene after finishing playback of the current scene. On the Actions Track, the Play Scene action icon ( [image]) replaces the marker.

4  If the first scene is a looped animation or a palindrome, Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track at the very last keyframe and insert a Stop Scene action. The Stop Scene action icon ( [image]) appears.

The Stop Scene action stops the playback of a scene, even if it is an endless loop. Be sure to insert this action after the Play Scene action; otherwise, the animation stops before scenes can be switched.

5  Return to the first scene and preview the animation in the browser. The playback should show the switched scenes.

6  Continue to add more scenes and automate playback by repeating steps 1 through 6.

Note: To give viewers more control over your animation, you can also attach the Play Scene action to a button image or hyperlink text in Layout view. For instructions on using actions with button images and text, see Using actions.


Using actions
Using Dynamic HTML

Using actions

Adobe GoLive comes with a complete set of ready-to-use scripted actions that are fully compatible with the 4.0 releases of Netscape Navigator and Microsoft Internet Explorer. Some actions work with 3.0 browsers.

You can attach actions to animations created with the TimeLine Editor, mouse rollover button images, linked normal images, and hyperlinks created with the Text Inspector.

To specify an action:

1  Select the object, animation, button, image, or hyperlink you want to initiate the action.

2  Choose an item from the Actions menu, which is available in three places:

•   The Action Inspector that appears when you insert an action marker on the Actions Track of the TimeLine Editor, or insert an action item from the Palette into the head section of the page.

•   The Actions tabs of the Button Inspector, Image Inspector, and Clickable Image Inspector.

•   The Actions tab of the Text Inspector.

See also:

Premade actions

Action triggers

Get Form Value

Get Floating Box Position

Preload Image

Random Image

Set Image URL

Go Last Page

Goto Link

Navigate History

Open Window

Document Write

Open Alert Window

Set Status

Drag Floating Box

Flip Move

Move By

Move To

Play Scene and Stop Scene

Play Sound and Stop Sound

Show Hide

Stop Complete

Wipe Transition

Netscape CSS Fix

Resize Window

Scroll Down, Left, Right, Up

Set Back Color

Condition

Action Group

Call Action

Call Function

Intersection and Timeout

KeyCompare

Using Variables

Read Cookie

Testing a Variable at Runtime

Setting a Variable’s Value at Runtime

Write a Cookie


Premade actions
Using actions

Premade actions

Adobe GoLive includes the following ready-to-use actions in the Actions menu.

See also:

Getters

Image

Link

Message

Multimedia

Others

Specials

Variables


Getters
Premade actions

Getters

Read and store the value of an object in the browser window. Get Form Value reads the current content of a form text field (see Get Form Value). Get Floating Box Position reads the current position of a floating box (see Get Floating Box Position).

See also:

Image

Link

Message

Multimedia

Others

Specials

Variables


Image
Premade actions

Image

Actions control the appearance of images. Preload Image makes the browser cache the image you specify before building the page display (see Preload Image). Random Image swaps the content of an image in a random sequence (see Random Image). Set Image URL lets you swap the content of a plain image (see Set Image URL).

See also:

Getters

Link

Message

Multimedia

Others

Specials

Variables


Link
Premade actions

Link

Actions control the content of the browser window. Go Last Page jumps to the page visited last (see Go Last Page). Goto Link jumps to a specified URL (see Goto Link). Navigate History jumps to a specified page in the browser’s history window (see Navigate History). Open Window opens a second browser window (see Open Window).

See also:

Getters

Image

Message

Multimedia

Others

Specials

Variables


Message
Premade actions

Message

Actions give the viewer hints or instructions. Document Write replaces an Inline Action Item with text or HTML code, a value supplied by an action, or the value of a variable (see Document Write). Open Alert Window displays a custom alert message in the browser (see Open Alert Window). Set Status displays a custom message in the status line of the browser (see Set Status).

See also:

Getters

Image

Link

Multimedia

Others

Specials

Variables


Multimedia
Premade actions

Multimedia

Actions control multimedia items, such as scenes in the TimeLine Editor, objects in floating boxes, and audio file playback. Drag Floating Box enables the viewer to drag an object in a floating box across the browser window and drop it anywhere on the page (see Drag Floating Box). Flip Move moves a floating box between two alternative positions (see Flip Move). Move By moves a floating box horizontally and/or vertically (see Move By). Move To moves a floating box to a user-specified position (see Move To). Play Scene and Stop Scene lets you control the playback of scenes (see Play Scene and Stop Scene). Play Sound and Stop Sound lets you control the playback of audio tracks (see Play Sound and Stop Sound). Show Hide controls the visibility of floating boxes (see Show Hide). Stop Complete stops all animations and audio tracks (see Stop Complete). Wipe Transition wipes objects in a floating box “in and out” using a smooth visual transition (see Wipe Transition).

See also:

Getters

Image

Link

Message

Others

Specials

Variables


Others
Premade actions

Others

Are miscellaneous actions. Netscape CSS Fix is a workaround script for several program errors in Netscape Navigator (see Netscape CSS Fix). Resize Window lets you dynamically set the size of the browser window (see Resize Window). Scroll Down, Left, Right, Up scroll the content of the browser window to the left, the right, up, or down (see Scroll Down, Left, Right, Up). Set Back Color sets the background color of a page (see Set Back Color).

See also:

Getters

Image

Link

Message

Multimedia

Specials

Variables


Specials
Premade actions

Specials

Monitor the browser window for certain events, control other actions, and trigger multiple actions. Action Group lets you group multiple actions and run them all at the same time (see Action Group). Idle, Intersection, and Timeout actions work together to monitor the browser window for a certain event and trigger an action when a specified condition is met (see Intersection and Timeout). Call Action calls an action that the head section of the page should execute (see Call Action). Call Function calls a function from the head section of the page or an external JavaScript library (see Call Function). Key Compare launches an action when the viewer presses a selected key (see KeyCompare). Condition monitors the browser window for a single event and triggers an action when a specified condition is met (see Condition).

See also:

Getters

Image

Link

Message

Multimedia

Others

Variables


Variables
Premade actions

Variables

Allow you to use variables as an input to other scripted actions, replacing settings you would make in the respective Inspector. Declare Variable lets you declare a variable. Each variable has a well-defined data type, which represents a typical property of an object in the browser window. You can name each variable and assign values for: strings, floating point values, URLs, colors, layer (floating box) positions, image URLs, and so on. (see Using Variables). Init Variable lets you assign an initial value to each variable when the page loads (see Using Variables). Read Cookie reads the content of a cookie saved to the viewer’s hard disk using the Write Cookie action (see Read Cookie). Set Variable lets you dynamically assign a value to a variable at runtime (see Setting a Variable’s Value at Runtime). Test Variable reads the current value of a variable (see Testing a Variable at Runtime). Write Cookie saves the value of a variable in a cookie on the viewer’s hard disk, thus making it persistent (see Write a Cookie).

See also:

Getters

Image

Link

Message

Multimedia

Others

Specials


Action triggers
Using actions

Action triggers

Actions need an event to trigger them. In the TimeLine Editor, actions are triggered automatically depending on their position relative to the time track.

You must specify an event trigger in the Actions tabs of the Button Image Inspector, Image Inspector, Clickable Image Inspector, and Text Inspector. Six mouse events and two key events are available:

•   Mouse Click triggers an action after a single mouse click on a button image, linked image, or text.

•   Mouse Enter triggers an action when the mouse pointer is moved over a button image, linked image, or text.

•   Mouse Exit triggers an action when the mouse pointer is moved away from a button image, linked image, or text.

•   Double Click triggers an action when the user double-clicks a button image, linked image, or text.

•   Mouse Down triggers an action when the user presses the mouse button while the pointer is on a button image, linked image, or text.

•   Mouse Up triggers an action when the user releases the mouse button while the pointer is on a button image, linked image, or text.

•   Key down and Key Press trigger an action when the user presses any key.

•   Key up triggers an action when the user releases any key.

The head section of the page provides additional options for triggering actions. The Exec pop-up menu in the Action Inspector lets you specify when and how an action in the head section executes.

The Exec pop-up menu offers the following options:

•   OnLoad (default) triggers the action when the browser loads the page. This is the default behavior already implemented in previous versions of Adobe GoLive.

•   OnUnload triggers the action when the browser leaves the page.

•   OnParse triggers the action when the browser reads that part of the document header (slightly earlier that OnLoad).

•   OnCall calls the action later in the browser session by using the Call Action action (see Call Action). When you create an OnCall action, Adobe GoLive assigns a default name (for example: B289B5EE0) that appears in the Name text box next to the pop-up menu. You can overwrite this name with a description that is easier to retrieve. The name you enter here must be unique; that is, it must not be used by any other variable or action in the page.


Get Form Value
Using actions

Get Form Value

The Get Form Value action reads the current content of a form element from the body of the current page. This action depends on input from the viewer in the form text field.

To set up a Get Form Value action:

1  Insert an Action Headitem in the head section of the page (see Inserting head action items).

2  Choose the Get Form Value option from the Getter submenu of the Actions menu in the Action Inspector (see Using actions).

3  In the Exec menu, set the Exec trigger to OnUnload. (You can also use the OnCall action if you attach it to a form image that serves as a Submit button.)

4  In the Form text box, enter the name of the form that contains the text field.

5  In the Element text box, enter the name of the text field whose content you want to read.

6  If your form contains more elements you want to have read, insert more Get Form Value actions and set them up as required.

7  Set up companion actions that process the result—for example, a Set Cookie action that stores the contents of various Get Form Value actions on the viewer’s hard disk. See Write a Cookie later in this chapter.


Get Floating Box Position
Using actions

Get Floating Box Position

The Get Floating Box Position action reads the current position of a floating box moving across the page. You can process this information using, for example, an Idle action that moves a second floating box to the current position of that floating box. This creates the impression that the second object trails the first.

To set up a Get Floating Box Position action:

1  Prepare an animation with two floating boxes. Open the TimeLine Editor and record an animation path for the first floating box.

2  Make sure that the second floating box has only one keyframe, so that it is static and unmoving. (You move this floating box using the Idle action.)

3  Insert an Action Headitem in the head section of the page (see Inserting head action items).

4  Choose the Get Floating Box Position option from the Getter submenu of the Action menu in the Action Inspector (see Using actions).

5  Set the trigger to OnCall in the Exec menu and name the action, for example, GetLeaderPosition.

6  Select the floating box you want to monitor from the Floating Box pop-up menu.

7  Insert another Action Headitem in the head section of the page and leave its trigger set to OnLoad.

8  Choose Action > Specials > Idle in the Action Inspector.

9  Deselect Exit Idle If Condition Returns True.

10  In the Condition tab choose Actions > Specials > Timeout enter an appropriate time interval in the Timeout text box.

11  In the True tab, choose Action > Multimedia > Move To as the action to execute when the condition is true. Then choose the floating box you want to move from the Floating Box pop-up menu.

12  Click the small icon next to the Link option to specify how to supply the Web address:

The red “C” icon ( [image]) (default) lets you specify a fixed Web address. The green question mark icon ( [image]) lets you choose an action. The blue ball icon ( [image]) lets you select a variable that holds the Web address.

13  Click the small icon next to the Pos option twice so a green question mark ( [image]) appears, and the pop-up menu lets you choose an action. Then Choose the Get Floating Box Position action defined in previous steps, for example GetLeaderPosition. This action supplies the position the floating box will move to.

Get Floating Box Position action

14  Click the False tab and repeat steps.

15  Preview the action in a 4.0 browser (see Previewing pages).


Preload Image
Using actions

Preload Image

The Preload Image action forces the browser to cache specified images before the page displays. Although the page may take longer to load initially, preloaded images are immediately available when loading is complete. Preloading images lets all the images on a page appear at the same time, and DHTML animations and actions can immediately swap images.

To set up a Preload Image action:

1  Insert an Action Headitem in the head section of the page (see Inserting head action items).

2  Choose the Preload Image option from the Image submenu of the Actions menu in the Action Inspector (see Using actions).

3  Use Point and Shoot to select an image in the site window, enter the URL of the image in the Link text box, or click Browse and select an image file.

4  Repeat for any image you want to preload.

Note: Don’t use Preload Image with image button rollovers—they are automatically preloaded.


Random Image
Using actions

Random Image

The Random Image action swaps the contents of an image placeholder in a random sequence, based on an external trigger such as a mouse-click or when the page loads. You can specify a maximum of three alternative images for the base image.

To set up a Random Image action for a normal image:

1  In Layout mode, insert an image placeholder.

2  In the Basic tab of the Image Inspector, refer to an image using the Browse button or Point and Shoot ( [image]).

3  In the Spec. tab of the Image Inspector, enter a unique name in the Name text box.

Important: Image actions require images of equal size to avoid problems with scaling. The Random Image action requires that the base image be named. Naming the base image ensures that it appears in the Base Image pop-up menu in the Actions tab of the Image Inspector.

4  In the Link tab of the Image Inspector, click the New Link button.

You must create a link for the Random Image action to work with a normal image. However, you don’t need to specify a target for this link. Replace the empty reference with a pound sign #, and press Enter.

5  In the Actions tab of the Image Inspector, select a mouse or key event and click the + button.

6  Choose the Random Image option from the Image submenu of the Actions menu in the Image Inspector.

7  In the Base Image pop-up menu, select the base image you want to have swapped in a random sequence.

8  Enter URLs for the alternate images in the Image 1, Image 2, and Image 3 text boxes.

A. First alternate image B. Second alternate image C. Third alternate image

9  Preview the action in a 4.0 browser.


Set Image URL
Using actions

Set Image URL

The Set Image URL action lets you swap the content of an image in the browser window, for example, an animated banner at the top of the page. You can exchange an image dynamically by inserting two keyframes in the TimeLine Editor and adding complementary Set Image URL actions at the same positions relative to the time track. You can also attach the action to any link to let the viewer decide.

To set up a Set Image URL action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Set Image URL from the Image submenu of the Actions menu in the respective Inspector.

3  Choose the plain image you want to exchange from the Image pop-up menu. To list the image, it must be named in the Spec. tab of the Image Inspector. To name it, type text in the Name text box within the Form section.

4  Use Point and Shoot to link to an image file in the Site window, type in the URL path to the alternative image in the Link text box, or click Browse and locate a local image file.

5  Preview the action in a 4.0 browser. The second image will be scaled to match the size of the first graphic.

6  To restore the base image, add a second keyframe and Set Image URL action pair to the Actions Track of the TimeLine Editor, or add a second button image or text item.

7  Repeat steps 2 through 4 for the new action. When repeating step 4, make sure you reference the original image displayed before the first Set Image URL is executed.

8  Preview the action in 3.0 and 4.0 browsers.

You can create a slide show by adding multiple Set Image URL actions and a complementary keyframe on the Actions Track of the TimeLine Editor.


Go Last Page
Using actions

Go Last Page

The Go Last Page action forces the viewer’s browser to jump to the last page visited. If you use this action, you should give a hint to viewers that they have already visited this page.

To set up a Go Last Page action:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Text Inspector, Image Inspector, or Button Inspector.

2  Select the Go Last Page option from the Link submenu of the Actions menu.

3  Preview the action in a 4.0 browser.


Goto Link
Using actions

Goto Link

The Goto Link action jumps to a user-specified URL. When using this action to jump to another site, it is good practice to give viewers a hint that they are going to move to another location on the Web.

To set up a Goto Link action in the TimeLine Editor or for a button image:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector. (Using this action with text may confuse viewers. Use a normal text hyperlink instead.)

2  Choose Actions > Goto Link.

3  Click the small icon next to the Link option to specify how to supply the Web address:

The red “C” icon ( [image]) (default) lets you specify a fixed Web address. The green question mark icon ( [image]) lets you choose an action. The blue ball icon ( [image]) lets you select a variable that holds the Web address.

4  If the current page is located in a frame set, use the Target text box to specify a target frame where the referenced page should appear.

5  Preview the action in a 4.0 browser.


Navigate History
Using actions

Navigate History

The Navigate History action makes the viewer’s browser jump back by a specified number of pages in the history window. If you use this action, you should give a hint to viewers that they have already visited this page.

To set up a Navigate History action:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Text Inspector, Image Inspector, or Button Inspector.

2  Select the Navigate History option from the Link submenu of the Actions menu.

3  Enter an integer number in the Go Where: text box to specify the number of pages you want the browser to jump back or forth.

4  Preview the action in a 4.0 browser (see Previewing pages).


Open Window
Using actions

Open Window

The Open Window action lets you open a second window on top of the browser’s default window. You can select what the new window will display by specifying a URL. It may take a few moments to open the new window.

To set up an Open Window action in the TimeLine Editor or attach it to a link:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Open Window from the Link submenu of the Actions menu in the respective Inspector.

A. Choose a mouse or key event that triggers the action. B. Click the + button to enable action attachment. C. Choose Actions > Open Window. D. Specify a destination on the Web or within your site. E. Specify the target frame within a frame set. F. Set the initial window properties, such as size and resizing capability.

3  Use Point and Shoot to link to a page or URL in the Site window, type in the URL in the Link text box, or click Browse and locate a local Web page.

4  If the current page is located in a frame set, use the Target text box to specify a target frame where the referenced page should appear.

5  Enter appropriate values (in pixels) in the Size text boxes to determine the initial size of the window when the browser opens it.

6  Select any of the following options to control the display:

•   Resize to allow resizing within the browser.

•   Scroll to control display scroll bars within the browser window.

•   Menu to control display of the browser’s menu bar.

•   Dir to display the standard browser directory buttons, such as What’s New and What’s Cool.

•   Tools to display the browser’s toolbar.

7  Preview the action in a 4.0 browser.


Document Write
Using actions

Document Write

The Document Write action is a companion action to the Inline Action Item. It replaces an Inline Action Item with text or HTML code you specify, the current value retrieved by an action, or the value of a variable.

To set up a Document Write action:

1  Insert an Inline Action Item (see Inserting inline action items) at a convenient location in the body section of the page.

2  Choose the Document Write option from the Message submenu of the Actions menu in the Action Inspector (see Using actions).

3  Click the small icon next to the HTML option to specify the source that should supply the HTML.

4  Preview the action in a 4.0 browser.


Open Alert Window
Using actions

Open Alert Window

The Open Alert Window action lets you open an alert dialog box with a custom text message to alert the viewer to some problem—for example, a preferred browser version for viewing a page.

To set up an Open Alert Window action in the TimeLine Editor or attach it to a button image or hyperlink text in the Layout view:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Open Alert Window from the Message submenu of the Actions menu in the respective Inspector.

3  Click the small icon next to the Message option to specify the source that should supply the HTML.

4  Preview the action in a 4.0 browser.


Set Status
Using actions

Set Status

The Set Status action allows you to display a custom text message in the status line at the bottom of the browser’s document window.

To set up a Set Status action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Set Status from the Message submenu of the Actions menu in the respective Inspector.

3  Enter the desired message in the Text text box.

4  Preview the action in a 4.0 browser.


Drag Floating Box
Using actions

Drag Floating Box

The Drag Floating Box action allows viewers to drag a floating box around the page in their browser window.

To set up a Drag Floating Box action in the TimeLine Editor:

1  Insert a floating box and fill it with content (see Setting up floating boxes). Be sure to let viewers know that they can move the item.

2  Insert an Action Headitem into the head section of the page (see Inserting head action items).

3  Choose Drag Floating Box from the Multimedia submenu of the Actions menu in the Action Inspector.

4  Choose the floating box you want to drag from the Floating Box pop-up. The floating boxes in the current page are named Layer, Layer 1, Layer 2, and so on, unless you have renamed them in the Floating Box Inspector (see Setting up floating boxes).

5  Preview the action in a 4.0 browser. You should be able to drag the item.


Flip Move
Using actions

Flip Move

When triggered for the first time, the Flip Move action moves a floating box to a user-specified position. When triggered for the second time, it moves the floating box back to its start point. For example, you can attach this action to a button to let the user flip an object into view that is initially hidden behind the edge of the page and flip it back out of sight again.

To set up a Flip Move action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Flip Move from the Multimedia submenu of the Actions menu.

3  Choose the floating box you want to drag from the Floating Box pop-up. The floating boxes in the current page are named Layer, Layer 1, Layer 2, and so on, unless you have renamed them in the Floating Box Inspector (see Setting up floating boxes).

4  Use the Pos1 and Pos2 text boxes to edit the start and end points for the flip move action, or drag the floating box to the desired start point and click Get to use those coordinates for Pos1. Repeat for Pos2 to determine the end point.

5  Make sure that the Anim option is selected.

6  Enter a value in the Ticks text box to specify animation speed. One tick equals 1/60 of a second. The higher the number of ticks, the slower the object moves.

7  Preview the action in a 4.0 browser.


Move By
Using actions

Move By

The Move By action moves a floating box horizontally and/or vertically by a user-specified offset.

To set up a Move By action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Image or Text Inspector.

2  Choose Move By from the Multimedia submenu of the Actions menu.

3  Choose the floating box you want to drag from the Floating Box pop-up. The floating boxes in the current page are named Layer, Layer 1, Layer 2, and so on, unless you have renamed them in the Floating Box Inspector (see Setting up floating boxes).

4  Click the small icon next to the Floating Box option to specify how the floating box parameters will be supplied.

The red “C” icon ( [image]) (default) lets you enter your own constant values. The green question mark icon ( [image]) lets you choose an action. The blue ball icon ( [image]) lets you select a variable defined in the page.

5  If you use constants:

•   Enter the number of pixels that you want to move the floating box horizontally in the DeltaX text box.

•   Enter the number of pixels that you want to move the floating box vertically in the DeltaX text box.

6  Make sure the Anim option is selected. Preview the action in a 4.0 browser.


Move To
Using actions

Move To

The Move To action is a “one-way” version of Flip Move (see Flip Move). It moves a floating box to a user-specified position, where it remains for the rest of the browser session.

To set up a Move To action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Image or Text Inspector.

2  Choose Move To from the Multimedia submenu of the Actions menu.

3  Choose the floating box you want to drag from the Floating Box pop-up. The floating boxes in the current page are named Layer, Layer 1, Layer 2, and so on, unless you have renamed them in the Floating Box Inspector (see Setting up floating boxes).

4  Click the Floating Box option and specify how to supply the floating box parameters.

The red “C” icon ( [image]) (default) lets you enter your own constant values. The green question mark icon ( [image]) lets you choose an action. The blue ball icon ( [image]) lets you select a variable defined in the page.

5  If you use constants:

•   Use the Pos text box to edit the end point for the Move To action, or drag the floating box to the desired end point and click Get to use those coordinates for the end position. The start point is implicit—that is, Adobe GoLive assumes you want the animation to start where the floating box is located before you define the end point.

•   Enter a value in the Ticks text box to specify animation speed. One tick equals 1/60 of a second. The higher the number of ticks, the slower the object moves.

6  Make sure the Anim option is selected. Preview the action in a 4.0 browser.


Play Scene and Stop Scene
Using actions

Play Scene and Stop Scene

The Play Scene and Stop Scene actions let you manage the playback of single-scene animations or multiple scenes created with the TimeLine Editor. You can control multiple-scene animations dynamically by inserting Play Scene and Stop Scene actions on the action track of the TimeLine Editor (see Creating multiple scenes) or let the viewer control scene playback by clicking buttons labeled, for example, Play and Stop.

See also:

To set up a Play Scene action for a button image or hyperlink text

To set up a Stop Scene action for a button image or hyperlink text


To set up a Play Scene action for a button image or hyperlink text
Play Scene and Stop Scene

To set up a Play Scene action for a button image or hyperlink text:

1  Select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Stop Scene from the Multimedia submenu of the Actions menu in the respective Inspector. (Inserting a Stop Scene action is good practice at this point; it stops any other animation that may still be playing when the viewer clicks the Play button.)

3  Click the + button one more time, then choose Actions > Play Scene.

4  Choose the scene you want the browser to play back from the Scene pop-up menu.

See also:

To set up a Stop Scene action for a button image or hyperlink text


To set up a Stop Scene action for a button image or hyperlink text
Play Scene and Stop Scene

To set up a Stop Scene action for a button image or hyperlink text:

1  Select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Stop Scene from the Multimedia submenu of the Actions menu in the Inspector.

3  Choose the scene you want the browser to stop from the Scene pop-up menu.

4  Preview the action in a 4.0 browser.

See also:

To set up a Play Scene action for a button image or hyperlink text


Play Sound and Stop Sound
Using actions

Play Sound and Stop Sound

You can insert the Play Sound and Stop Sound actions on the Actions Track of the TimeLine Editor, or attach them to a pair of Play and Stop buttons, or text in the Layout view. Use the action to control the playback of an audio track embedded using a plug-in.

Note: The Play Sound action requires a cross-platform, cross-browser audio plug-in that can be controlled by JavaScript.

See also:

To set up a Play Sound action in the TimeLine Editor or attach it to a button image or hyperlink text

To set up a Stop Sound action


To set up a Play Sound action in the TimeLine Editor or attach it to a button image or hyperlink text
Play Sound and Stop Sound

To set up a Play Sound action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Insert a plug-in placeholder and link it with a sound file (see Adding audio and video clips). Name the audio plug-in (the name is referenced later to tell the browser which plug-in to play). Then specify custom attributes and playback behavior in the Plug-in Inspector.

2  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event. Click the + button in the Actions tab of the Button Inspector or Text Inspector.

3  Choose Stop Sound from the Multimedia submenu of the Actions menu in the respective Inspector. (Inserting a Stop Sound action is good practice; it prevents system crashes by stopping any other sound track that may still be playing when the viewer clicks the Play button.)

4  Select the sound you want to stop from the Name pop-up menu.

5  Insert another action marker on the Actions Track of the TimeLine Editor or click the + button in the Button Inspector or Text Inspector one more time, then select Play Sound from the Multimedia submenu of the Actions menu.

6  Choose the sound you want to start playing back from the Name menu.

7  Preview the action in a 4.0 browser.

See also:

To set up a Stop Sound action


To set up a Stop Sound action
Play Sound and Stop Sound

To set up a Stop Sound action:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Stop Sound from the Multimedia submenu of the Actions menu in the respective Inspector.

3  Choose the sound you want to stop from the Name pop-up menu.

4  Preview the action in a 4.0 browser.

See also:

To set up a Play Sound action in the TimeLine Editor or attach it to a button image or hyperlink text


Show Hide
Using actions

Show Hide

The Show Hide action lets you control the visibility status of a floating box in the browser’s document window. You can show or hide objects dynamically by inserting two keyframes in the TimeLine Editor (see Animating a floating box, for instructions) and adding Show Hide actions to the time track of the floating box.

To set up a Show Hide action in the TimeLine Editor:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker.

2  Choose Show Hide from the Multimedia submenu of the Actions menu in the Action Inspector.

3  In the Layer menu, choose the floating box you want to assign the action to. The floating boxes in the current page are named Layer, Layer 1, Layer 2, and so on, unless you have renamed them in the Floating Box Inspector (see Setting up floating boxes).

4  In the Mode menu, choose what should happen to the floating box:

•   Hide hides the floating box until a complementary Show action is executed.

•   Show uncovers the floating box until a complementary Hide action is executed.

•   Toggle shows or hides the floating box, depending on its current visibility status.

5  Create another keyframe and a complementary Show Hide action in the TimeLine Editor.

6  Preview the action in a 4.0 browser.


Stop Complete
Using actions

Stop Complete

The Stop Complete action stops all animation in the browser’s window. As a courtesy to viewers with slow connections, include a Stop Animation button in any animated page you create, allowing them to stop playback without choosing a menu command or editing browser preferences.

To set up a Stop Complete action for a button image or hyperlink text in the Layout view:

1  Select a mouse or key event and click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Stop Complete from the Multimedia submenu of the Actions menu in the Action Inspector.

3  Preview the action in a 4.0 browser.


Wipe Transition
Using actions

Wipe Transition

The Wipe Transition action fades floating boxes and their visible content in and out using a “shutter effect.”

To set up a Wipe Transition action:

1  In Layout mode, insert a floating box and provide some content. You can use a button image, a normal image, or text.

2  If you use a normal image or text, select the object and click the New Link ( [image]) button in the toolbar or the Image Inspector.

3  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event. Click the + button in the Actions tab of the Button Inspector, Image Inspector, or Text Inspector.

4  Choose the Wipe Transition option from the Multimedia submenu of the Actions menu.

5  In the Layer menu, choose the floating box you want to assign the action to. The floating boxes in the current page are named Layer, Layer 1, Layer 2, and so on, unless you have renamed them in the Floating Box Inspector (see Setting up floating boxes).

6  Select an option from the Transition menu to determine the way the floating box will be wiped in or out.

7  Enter an integer in the Steps text box to determine the number of steps for the transition. The higher the number of steps, the smoother the transition appears.

8  Preview the action in a 4.0 browser (see Previewing pages).


Netscape CSS Fix
Using actions

Netscape CSS Fix

The Netscape CSS Fix action is a workaround for a program error in Netscape Navigator that causes Web pages to lose important CSS information when the viewer resizes the browser window.

To set up a Netscape CSS Fix action:

1  Insert an Action Headitem in the head section of the page.

2  Choose the Netscape CSS Fix option from the Others submenu of the Actions menu in the Action Inspector.

3  Test-run your animations or actions in Netscape Navigator 4.0.

Note: We recommend using the Netscape CSS Fix action whenever you create animations involving floating boxes. With frame sets, make sure to use the action in the head section of the page and not the frame set.


Resize Window
Using actions

Resize Window

The Resize Window action resizes the browser window. You can have the resize action triggered dynamically by an action inserted in the TimeLine Editor or provide clickable buttons or text links if you want to enable the viewer to make the decision.

To set up a Resize Window action:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event and click the + button in the Actions tab of the Button Inspector, Image Inspector, or Text Inspector.

2  Choose the Resize Window option from the Others submenu of the Actions menu in the respective Inspector.

3  Enter a value (in pixels) in the Width text box to specify the width the window will be resized to by the action.

4  Enter a value (in pixels) in the Height text box to specify the height the window will be resized to by the action.

5  Preview the action in a 4.0 browser.


Scroll Down, Left, Right, Up
Using actions

Scroll Down, Left, Right, Up

The Scroll Left, Scroll Top, Scroll Right, and Scroll Down actions let you dynamically scroll the browser window. For example, you can use these actions to let the viewer follow the path of a floating box traveling beyond the margin of the window.

To set up a Scroll Left, Scroll Top, Scroll Right or Scroll Down action:

1  If you want to have the window scroll dynamically, Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker. If you want to leave the decision to the viewer, select a mouse or key event and click the + button in the Actions tab of the Button Inspector, Image Inspector, or Text Inspector.

2  Choose the Scroll Left, Scroll Top, Scroll Right, or Scroll Down option from the Others submenu of the Actions menu in the respective Inspector.

3  Enter a value (in pixels) in the Scroll pixels text box to specify the pixel distance which you want the window to scroll.

4  Enter a value (in pixels) in the Scroll Speed text box to specify how fast you want the window to scroll. The higher the value you enter, the faster the scroll speed.

5  Preview the action in a 4.0 browser.


Set Back Color
Using actions

Set Back Color

The Set Back Color action lets you change the background color of the browser window. You can change the background color either dynamically by using the Set Back Color action in the TimeLine Editor, or you can attach it to buttons or text to let the viewer choose.

To set up a Set Back Color action in the TimeLine Editor or attach it to a button image or hyperlink text:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker, or select a mouse or key event. Click the + button in the Actions tab of the Button Inspector or Text Inspector.

2  Choose Set Back Color from the Others submenu of the Actions menu of the respective Inspector.

3  Click the Background Color field to open the Color Palette.

4  Choose a color from any tab (preferably a browser-safe color from the Real Web Colors tab, and drag it from the preview pane of the Color Palette onto the Background Color field.

5  Preview the action in a 4.0 browser (see Previewing pages).


Condition
Using actions

Condition

The Condition action monitors the browser window for the occurrence or nonoccurrence of an event (either a single or a recurring event) and triggers two other actions if the specified condition is true or false. You can choose between two conditions, the Timeout and Intersection actions (see Intersection and Timeout). This action runs without any user input, so it is best used with an action item in the head section of the page.

To set up a Condition action:

1  Insert an Action Headitem in the head section of the page (see Inserting head action items).

2  Choose the Condition option from the Specials submenu of the Actions menu at the top of the Action Inspector.

3  In the Condition tab, select the Intersection or Timeout action as the condition. (For instructions on using the Intersection or Timeout action, see Intersection and Timeout.)

4  In the True tab, specify an action to be executed when the specified condition evaluates to true.

5  In the False tab, specify an action to be executed when the specified condition evaluates to false. For example, if you have an image on your page, you can use the Set Image URL action (see Set Image URL) to swap the image content based on the result of the condition action.

6  Preview the action in a 4.0 browser.


Action Group
Using actions

Action Group

The Action Group action lets you group other actions and run them all at the same time. This action is most useful on the actions track of the TimeLine Editor (see Inserting actions in an animation), but can also be used with buttons or a text link if you want to let the viewer decide whether to run the grouped actions or not.

To set up an Action Group action:

1  Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert an action marker.

2  Select the Action Group option from the Specials submenu of the Actions menu at the top of the Action Inspector.

3  Click the + button to add an action placeholder.

4  Select any option from the second Actions menu at the bottom of the Action Inspector.

5  Repeat steps 3 and 4 until you have added all desired actions to the Action Group.

6  Preview the action in a 4.0 browser.


Call Action
Using actions

Call Action

The Call Action action available from the Specials submenu of the Actions menu calls an action from the head section of the page. In order for Call Action to work, the trigger for the action in the header must be set to OnCall (see Action triggers).

The Call Action action can be used to make your actions modular and easier to maintain. For example, when your page contains two links that jump to the same URL (one at the top, one at the bottom), you define the GoToURL action once in the header and connect it with a button and a text link. If you decide to change the URL addressed by the two controls later on, you will only need to change it once.

By clicking the small icon next to the Action pop-up menu you can specify how to supply the name of the action:

The red “C” icon ( [image]) (default) lets you select an action. The green question mark icon ( [image]) lets you choose an action. The blue ball icon ( [image]) lets you select a variable of the type “Action name” that holds an action name.


Call Function
Using actions

Call Function

The Call Function action from the Specials submenu of the Actions menu calls a function from the head section of the page or an external JavaScript library. In order for the Call Function action to work, you must create a function in the head section using the JavaScript editor.

Note: Action-based JavaScript calls will make it easier for JavaScript-savvy developers to create new actions.


Intersection and Timeout
Using actions

Intersection and Timeout

The Idle action inserts a script that monitors the browser window for a user-specified condition and triggers other actions, depending on whether the condition is true or false. You can choose between three conditions: timeout, intersection, and key compare. These actions are best used in the head section of the page as the conditions are to be checked automatically.

The Timeout action is a timer and switch combination. It lets you specify a time span after which the browser should switch between two states. The condition it monitors is “false” while the timeout period still lasts and returns “true” when the timeout period has elapsed. Either state has its own action. You can use this action to implement a timed switch in the browser window—for example, to switch the content of a banner image.

The Intersection condition monitors the browser window for the physical intersection of two floating boxes. It is true when the floating boxes overlap in the browser window and false if they don’t. You can use the result of this action to trigger two further actions.

This action supplements the Drag Floating Box action (see Drag Floating Box). An intersection occurs when the paths of two floating boxes cross. The Intersection action may be connected, for example, with a Set Back Color action (see Set Back Color), causing the browser to change the background color.

See also:

To set up an Intersection or Timeout action

To set up an Intersection action as a condition


To set up an Intersection or Timeout action
Intersection and Timeout

To set up an Intersection or Timeout action:

1  Insert an Action Headitem in the head section of the page (see Inserting head action items).

2  Choose the Idle option from the Specials submenu of the Actions menu in the Action Inspector.

3  Select the Condition tab (see Condition) and choose the Timeout option from the Specials submenu of the Actions menu.

4  To have the action stop the first time the Timeout condition is true, select Exit Idle if Condition Returns True. By activating this option, you instruct the browser to switch states once only.

5  Enter a time span in seconds in the Timeout in Seconds text box.

6  Click the True tab and select the action to be triggered when the Timeout limit has elapsed. In the following example, the Timeout action triggers a Set Image URL action (see Set Image URL), causing the browser to change the content of an image.

7  Click the False tab and choose the action to be executed while the Timeout period still lasts. In the example shown above, you would use a second Set Image URL action that supplies an alternative image.

8  Preview the action in a 4.0 browser.

See also:

To set up an Intersection action as a condition


To set up an Intersection action as a condition
Intersection and Timeout

To set up an Intersection action as a condition:

1  Click the Condition tab; then choose the Intersection option from the Specials submenu of the Actions menu.

2  If you want the action to terminate the first time the Timeout condition is true, enable the Exit Idle if Condition returns true option. By activating this option, you instruct the script to monitor the browser window for a single event.

3  Select the floating boxes you want to monitor for the intersection from the two Floating Box pop-up menus.

4  Click the True tab and choose the action you want to have triggered when an intersection occurs.

5  Click the False tab and choose the action to be executed while the floating boxes don’t overlap.

6  Preview the action in a 4.0 browser.

See also:

To set up an Intersection or Timeout action


KeyCompare
Using actions

KeyCompare

The KeyCompare action from the Specials submenu of the Actions menu launches an action when the viewer hits a selected key. This action is designed for use with the Idle action, which goes into the head section of the page because it must load ahead of the visible page content. You can use this action, for example, to simulate Windows-style access keys for objects on your page.

To set up a KeyCompare action:

1  Drag the Action Headitem icon from the CyberObjects tab ( [image]) of the Palette into the head section of the page.

2  In the Action Inspector, choose Idle from the Specials submenu of the upper Actions menu.

3  Go to the Condition tab and choose KeyCompare from the Specials submenu of the lower Actions menu.

4  Enter the ASCII character code that corresponds to the desired keystroke in the CharCode text box.

5  Click the True tab and choose the action you want the keystroke to trigger.

6  Return to the page and add a visual hint for the viewer, for example an instruction like “Press K”.

Important: Do not specify an action on the False tab. A keystroke is a single event whose absence need not—and must not—be monitored.


Using Variables
Using actions

Using Variables

Adobe GoLive features a set of actions that allows you to use variables. You can use variables as an input to other scripted actions, replacing settings you would make in the respective Inspector.

There are two major uses for variables defined with the Set Variable action:

•   You can use variables as pseudo-constants to specify a fixed value for another action.

•   You can dynamically store object properties in variables at runtime and set a cookie to write them to the viewer’s hard disk. This is possible for selected properties of the browser window, such as background color.

To use a variable in a page, you must declare it first. After declaring a variable, you may want to initialize it.

See also:

To declare a variable

To initialize a variable


To declare a variable
Using Variables

To declare a variable:

1  Drag the Action Headitem icon from the CyberObjects tab of the Palette into the head section of the page.

2  In the Action Inspector, choose Set Variable from the Variables submenu of the Actions menu.

3  Enter a variable name in the Name text box. Make sure that its name is not used by any other JavaScript item in the page, and follows the standard JavaScript naming conventions for variables. Names must consist of alphabetical characters only. Digits, dashes, slashes, and other non-alpha characters are not allowed.

4  Choose an appropriate data type from the Type menu:

Boolean Any on/off state in the current page.

Integer Any integer value in the current page.

Float Any floating point value in the current page.

String Any string value in the current page.

Layer Any floating box in the current page.

Layer Position Location of a floating box in the current page.

Image Any image in the current page.

URL Any URL in the current page.

Color Any color in the current page.

Scene Any scene in the current page.

OnCall Action Any action from the head section of the page whose trigger is set to OnCall (see Action triggers).

Function Any function declared in the head section of the page.

5  Use the Cookie text box to enter the name of the cookie in which you want to store the value of the variable on the viewer’s hard disk. You will use the Write Cookie and Read Cookie actions explained later in this section to set the cookie and read its content, respectively.

See also:

To initialize a variable


To initialize a variable
Using Variables

To initialize a variable:

1  Drag the Action Headitem icon from the CyberObjects tab ( [image]) of the Palette into the head section of the page.

2  In the Action Inspector, choose Init Variable from the Variables submenu of the Actions menu.

3  Choose the variable you want to initialize from the Variables pop-up menu.

4  The Value item changes automatically with the type of the variable. Use the appropriate control to supply an initial value:

Boolean A checkbox (selected is true, deselected is false).

Integer A text box that accepts whole numbers only.

Float A text box that accepts numbers with decimal points.

String A text box that accepts any string of text.

Layer A pop-up menu showing all floating boxes in the page.

LayerPos Two x and y text boxes for the position of a floating box and a Get button that reads the current position.

Image A pop-up menu listing the named images in the current page.

URL A typical text box, Browse button and Point and Shoot button combination for specifying URLs.

Color A color field that brings up the Color Palette when clicked.

Scenes A pop-up menu that lists all scenes in the current page.

OnCall Action A pop-up menu listing all actions from the head section that have their trigger set to OnCall (see Action triggers).

Functions A pop-up menu that lists all function declarations from the head section of the current page.

See also:

To declare a variable


Read Cookie
Using actions

Read Cookie

The Read Cookie action lets you retrieve information stored in a cookie at runtime. You can have your site read a cookie when your page loads, or when a viewer clicks on an item on your page.

To have the browser read the cookie when the page loads:

1  Drag the Action Headitem icon from the CyberObjects tab of the Palette into the head section of the page.

2  Choose Read Cookie from the Variables submenu of the Actions menu.

3  Enter the name of the cookie specified in the Write Cookie action in the Name text box.

To have the browser read a cookie when a viewer mouse-clicks on a specific item in your page:

1  Create a text link, image or button image.

2  Go to the Inspector window and add an action by selecting an item from the events list and clicking the + button on the Actions tab of the respective Inspector.

3  Choose Read Cookie from the Variables submenu of the Actions menu.

4  Enter the name of the cookie specified in the Write Cookie action in the Name text box.


Testing a Variable at Runtime
Using actions

Testing a Variable at Runtime

Test Variable is an extension to the Idle action that allows you to read the current value of a variable and compare it with a value you specify. This comparison evaluates either as true or false, and the result can be used to trigger two alternative actions.

To set up a Test Variable action:

1  Drag the Action Headitem icon from the CyberObjects tab of the Palette into the head section of the page.

2  In the Action Inspector, choose Idle from the Special submenu of the Actions menu.

3  In the Condition tab of the Idle action, choose Test Variable from the Variables submenu of the lower Actions menu.

4  Choose the variable whose value you want to compare from the Variables pop-up menu.

5  The Value item changes automatically with the type of the variable. Use the appropriate control to supply a value (like the URL in the example shown above) you want to test the variable against, as set out in the preceding section on variable initialization.

6  In the Operator pop-up menu specify the type of the comparison.

Note: Not all comparison operators work with all types of variables. For example, using “Greater than” with a string variable will result in a JavaScript error in the browser because the browser expects a number.


Setting a Variable's Value at Runtime
Using actions

Setting a Variable’s Value at Runtime

You may want to assign a certain value to a variable at runtime.

To set up a Set Variable action:

1  Drag the Action Headitem icon from the CyberObjects tab ( [image]) of the Palette into the head section of the page.

2  In the Action Inspector, choose Test Variable from the Variables submenu of the Actions menu.

3  Set the Exec trigger to OnCall and enter a name for the Set Variable action in the Name text box. This is required if you want to make the Set Variable action accessible at runtime. If you leave the Exec trigger set to the OnLoad default value, the Set Variable action is executed when the page loads and the new value will overwrite your initialization. If you set the trigger to OnUnload, you will not be able to set the variable at runtime because the Set Variable action runs when the browser leaves the page.

4  Choose the variable whose value you want to set from the Variables pop-up menu.

The Value item changes automatically with the type of the variable. Use the appropriate control to supply an initial value, as explained in the preceding section on variable initialization.


Write a Cookie
Using actions

Write a Cookie

Cookies allow you to store the value of a variable temporarily on the viewer’s hard disk. This function enables you to make viewer-customizable pages, because it allows the viewer to change the properties of the browser window and reload their own personalized version of the page later on.

To set up a Write Cookie action:

1  Drag the Action Headitem icon from the CyberObjects tab of the Palette into the head section of the page.

2  In the Action Inspector, choose Write Cookie from the Variables submenu of the Actions menu.

3  Enter a name for the cookie in the Name text box. This name will be used when the Write Cookie action sets the cookie at runtime.

4  In the Expires after text box, enter an expiration date (in hours) to determine how long the cookie will last after it has been set.

5  Set optional attributes:

•   Path lets you specify the subset of URLs in a domain for which the cookie is valid. If a cookie has already passed domain matching, then the path name component of the URL is compared with the path attribute, and if there is a match, the cookie is considered valid and is sent along with the URL request.

•   Domain lets you specify a valid Internet domain name. When searching the cookie list for valid cookies, the attribute you specify here for the current cookie is compared with the Internet domain name of the host from which the URL will be fetched. If the tails of both domain names match, then the cookie will go through path matching to see if it should be sent.

•   Secure lets you ensure that the cookie will only be transmitted if the communications channel with the host is a secure one. If secure is not specified, a cookie is considered safe to be sent in the clear over unsecured channels.

For more detailed information on the optional Path, Domain, and Secure attributes, please refer to the Web page at http://home.netscape.com/newsref/std/cookie_spec.html.


Shifting Code to an External Library
Using Dynamic HTML

Shifting Code to an External Library

Adobe GoLive lets you create an external JavaScript library file that stores common code from animated scenes created in the TimeLine Editor, JavaScript actions, image buttons, dynamic components, and other DHTML objects. At the same time, it removes common code from your pages and replaces it with references to the library, leaving only page-specific declarations and parameters in place. The library is then uploaded to the Web server to make it available for every page in the site that needs the script.

See also:

Benefits of using external JavaScript libraries

Using the JavaScript library at page level

Using the JavaScript Library by Default


Benefits of using external JavaScript libraries
Shifting Code to an External Library

Benefits of using external JavaScript libraries

Apart from streamlining the code in your pages, this library offers two advantages:

•   It remedies a problem associated with the structure of dynamic components: Adobe GoLive invariably places common code for DHTML items and actions in the head section of a page. While this works well with “straight” pages, problems occurred in earlier versions whenever a dynamic component contained DHTML items and scripted actions. As the browser loads only the body section of a dynamic component, it ignores any script code contained in the head section. This problem can be solved by using the external JavaScript library, making JavaScript code in dynamic components work as expected.

•   The browser caches the JavaScript library file, making your pages load faster.


Using the JavaScript library at page level
Shifting Code to an External Library

Using the JavaScript library at page level

You can enable the JavaScript library feature on a per-page basis and have Adobe GoLive shift the code from the current page to the library.

To shift code from the current page to the library:

1  Click the small page symbol above the main content area of the document window to bring up the Page Inspector.

2  Switch to the HTML tab of the Page Inspector.

Use these options to determine where Adobe GoLive stores common code for scripted actions from the current page.

3  Click the Import CS Library radio button to have Adobe GoLive shift JavaScript code from the current page to the external library.


Using the JavaScript Library by Default
Shifting Code to an External Library

Using the JavaScript Library by Default

The JavaScript option in the LiveObjects view of the Preferences dialog box controls the usage of the external JavaScript library in Adobe GoLive, leaving the decision to you whether you want the program to include JavaScript code from DHTML objects in any page you create (default behavior) or to shift it to the external library.

Use the options in the LiveObjects Preferences dialog box or Page Inspector as follows:

•   Leave the Write code to Page default option activated to have Adobe GoLive include the entire JavaScript code in the page(s) where the scripted action is used.

•   If your pages contain dynamic components, select the Import CSScriptLib radio button. This option instructs Adobe GoLive to shift common code from any page you create from now on to the CSScriptLib.js script library. At the same time, a file reference is created in the header of each new page you create to ensure that the common code from the library is available when the browser loads the page.

When you select the Import CSScriptLib radio button in the LiveObjects Preferences dialog box, Adobe GoLive reacts in one of two ways, depending on whether or not you have a site document open.

•   If the site document is open, it will create a library file in a new folder named Generated Items at the root level of the site folder when you save the page.

•   If you don’t have a site document open in the background when you save the page, Adobe GoLive writes the code to a default library file which can be found in the Modules: JScripts subfolder of the Adobe GoLive program folder.

Note: Selecting the Import CSScriptLib radio button in the LiveObjects Preferences dialog box does not move code from pages you have already saved to the CSScriptLib.js script library. To move code from those pages to the library, you will have to open each page and select the Import CSScriptLib radio button in the HTML tab of the Page Inspector.


Using Cascading Style Sheets

CStyle sheet properties supported by Web browsers vary greatly between both browser vendors and browser versions. Web designers need to consider which browser viewers are likely to use. In general, Netscape 4.0 and Internet Explorer 4.0 or later support many of the properties that can be specified in Adobe GoLive.

See also:

About page design with cascading style sheets

About cascading style sheets

Creating a style sheet

Defining style properties

Managing styles

Applying styles and referencing style sheets

Previewing with cascading style sheets


About page design with cascading style sheets
Using Cascading Style Sheets

About page design with cascading style sheets

You can simplify and standardize Web page design with cascading style sheets. Use a style sheet to set the typographic properties of each HTML format, or create styles that you can apply selectively to text.

A. Header 1 tag formatted with CSS font size, background color, and border properties B. Varying font sizes created by assigning custom inline styles to each letter

You can also use a style sheet to control the position of text and objects in floating boxes on a page. Adobe GoLive lets you position these elements with pixel-level precision.

Images and text can be placed in floating boxes for positioning.

Adobe GoLive also uses absolute positioning for its built-in dynamic HTML objects. See Using Dynamic HTML.


About cascading style sheets
Using Cascading Style Sheets

About cascading style sheets

Adobe GoLive reads Cascading Style Sheet level 1 (CSS1) formatted documents without changing styles and formatting rules. It can display most of the style properties addressed in the CSS1 specification and gives Web authors a large choice of CSS1 formatting options, including:

•   Internal and external style sheets.

•   Tag selectors for reformatting the tags in an HTML document.

•   Structure-independent styles based on classes.

•   Unique styles for selected elements based on IDs.

•   A wide choice of style properties, including font, text, block (or box), positioning, border, background, and list styles.

See also:

Basic style sheet syntax

Selectors

Inheritance

How style sheets are embedded in HTML

How style sheets cascade

The CSS1 formatting model

About relative and absolute length units

About percentage units

About color units


Basic style sheet syntax
About cascading style sheets

Basic style sheet syntax

Regardless of the way cascading style sheets are incorporated in your documents, the basic syntax is always the same. Style sheet specifications— commonly referred to as rules—consist of a single line of text with the following basic notation:

selector { property: value }

The selector element is an HTML tag or another item that the CSS1 syntax can address. The property element defines a style feature that the content will have when rendered by the browser. The value specifies how this feature is rendered.

The following is an example of a basic style sheet rule:

H1 {font-weight: bold; font-size: 24pt}

This rule instructs the browser to display the first-level header in 24 point size and bold typeface, overriding the browser’s HTML preferences.


Selectors
About cascading style sheets

Selectors

Unlike in a printed document, the structure of an HTML page determines its formatting. Tags that identify the position within that structure enclose the content.This underlying principle makes it difficult to address individual items of text for formatting, thus creating a need for a different addressing mechanism. CSS1 uses selectors to solve that problem. A selector is a string of code that identifies what elements the corresponding rule applies to. It connects the HTML page with the style sheet.

Selectors may have several components:

•   Tags: All HTML tags are possible selectors. If used as a selector, the enclosing greater than (>) and less than (<) characters are removed.

•   Classes: All elements inside the BODY section can be classed by adding a CLASS attribute. Classes can then be addressed in the style sheet to apply the formatting rules. A class definition consists of a period followed by string of text and a rule—for example.headline {color: green}. When defining classes in Adobe GoLive, you don’t have to type the period; Adobe GoLive will automatically add the period to the source code.

Two major classes of selectors are used with cascading style sheets:

•   Simple Selectors match elements based on the element type and/or attributes, not the element’s position in the document structure. H1 (all level 1 headers) and H1.headline (all level 1 headers with the CLASS attribute.headline) are examples of simple selectors.

•   Contextual Selectors match elements based on their position in the document structure. A contextual selector consists of several simple selectors. H1.headline B (all level 1 headers with the CLASS attribute.headline and bold typeface) is an example of a contextual selector consisting of two simple selectors, H1.headline and B. Future versions of Adobe GoLive will support contextual selectors.

The ID selector is a special case that allows for setting style properties on a per-element basis. It addresses a single element within the HTML document by adding an ID attribute with an alphanumeric identifier. In the style sheet, the same identifier is combined with a rule to apply special formatting. An ID definition consists of a pound sign (#) followed an alphanumerical identifier and a rule—for example, #xy99 {font-weight: 100}.


Inheritance
About cascading style sheets

Inheritance

If you assign a style to an HTML tag, its children inherit those style specifications. Suppose there is an H1 tag with a style property blue and an in-line emphasized element:

<H1>The headline <EM>is</EM> blue.</H1>

If no color has been assigned to the in-line EM element, the emphasized “is” will inherit the color of the parent element; that is, it will also display in blue. Other style properties are likewise inherited—for example, font-family and font-size.

As in hardcopy publishing, the value of a style property is often given as a percentage that refers to another property:

H1 { font-size: 24pt }

H1 { line-height: 120% }

If a property can be specified as a percentage, the browser needs to know what property the percentage refers to. Children of H1 will inherit the computed value of line-height and be set to 28.8 pt, but they will not inherit the percentage.


How style sheets are embedded in HTML
About cascading style sheets

How style sheets are embedded in HTML

Unlike HTML, the CSS1 mechanism keeps formatting instructions for HTML tags together in a container enclosed in a <STYLE> tag (= the style sheet), instead of interspersing them with the flow of HTML code. When loading the page, the browser reads the formatting instructions contained in that tag and caches them with the page. Subsequently, whenever the program finds an instance of an HTML tag for which custom format definitions exist in the style sheet, it applies those rules.

Cascading style sheets are embedded in the HTML using the <STYLE> tag. This tag has a TYPE attribute; its value is set to "text/css" by default. TYPE="text/css" tells the browser to interpret any formatting instructions enclosed in the <STYLE> tag as a CSS1 style sheet and build the screen display according to the rules specified within. Although CSS1 is the predominant style sheet mechanism currently in use on the Web, this type description may reduce conflicts with future style sheet mechanisms on the Web.

The following is an example of a basic, yet complete style sheet:

<STYLE type="text/css">

<!--

h1 {font-size: 36pt}

-->

</STYLE>

You’ll notice that the rules are enclosed in <!-- and --> HTML comment tags. These tags instruct browsers that are unaware of the style tag to ignore the tags (unknown tags are ignored).

CSS1 containment in HTML pages is based on external or internal style sheets. Adobe GoLive supports the four basic methods of embedding—the <LINK> tag and the @import command for external style sheets, and the <STYLE> tag and class element for internal style sheets.

See also:

External style sheets


External style sheets
How style sheets are embedded in HTML

External style sheets

External style sheets are text-only documents containing nothing but style definitions. They can either be referenced or imported:

•   A style sheet document can be referenced within the HTML page using the <LINK> tag. By referencing external style sheets, style definitions can be applied to several pages at a time or even to all pages throughout a site. Adobe GoLive reads and writes references to external style sheets. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css"

HREF="http://style.com/cool" TITLE="Cool">

</HEAD>

<BODY>

<H1>This page has an external stylesheet attached.</H1>

</BODY>

</HTML>

A referenced external style sheet works much like a master style sheet in a word-processing application. As with style sheets for word processing files, some definitions are “hard wired” to certain types of text. Also, you can override the definitions within the document and assign styles explicitly to selected text.

•   A style sheet can explicitly import another style sheet using a dedicated @import command. The imported style sheet is merged with any local style sheets. Adobe GoLive reads these import notations from existing files (if they have the proper syntax) and lists them in the Style Sheet window, but it won’t let you create any notations. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<STYLE TYPE="text/css">

@import url(http://style.com/basic);

</STYLE>

</HEAD>

<BODY>

<H1>This page has an imported stylesheet.</H1>

</BODY>

</HTML>

Internal style sheets Internal style sheets are confined to the document they are contained in. There are several methods for embedding internal style sheets:

•   An internal style is based on a <STYLE> tag with one or more selectors for HTML tags within the document. Embedded in the header section, this style sheet is only valid for the local page. This type of style sheet applies uniform styles to several instances of a tag within a document. Once these styles have been defined, they are automatically applied without any user intervention. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<STYLE TYPE="text/css">

<!--

H1 {

font-weight: bold;

font-size: 24pt;

font-family: sans-serif;

}

-->

</STYLE>

</HEAD>

<BODY>

<H1>This page holds an internal stylesheet.</H1>

</BODY>

</HTML>

An internal <STYLE> element with tag selectors works much like a word processor style sheet embedded in a file, the only difference being that its styles are “hard-wired” to certain text elements. You can change definitions within the document, but you cannot assign a style explicitly to selected text.

•   Another type of internal style sheet applies special formatting to individual blocks of text within the body section. It is based on a CLASS definition in the header and local CLASS attributes assigned to selected tags or paragraphs.

The CLASS element closely resembles user-defined paragraph and character styles in a word-processing application in that the author creates and applies the style definition. CLASS style elements are easily recognized by their name, which begins with a period, as in .headline. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<STYLE TYPE="text/css">

<!--

.headline { color: #00FF00 }

.bodycolored { color: #0099FF }

-->

</STYLE>

</HEAD>

<BODY>

<H1 CLASS=headline>This headline is formatted using a CLASS element.</H1>

<P CLASS=bodycolored>This paragraph has a custom color.</P>

</BODY>

</HTML>

The CLASS element works much like a paragraph or character style in a word-processing application. You can change its definition within the document and assign it to selected paragraphs.

The ID element is a special style element. It also consists of a style definition in the header but is locally confined to a unique element within the page. An alphanumeric identifier that appears within the definition and the tag it controls makes the assignment. The name of ID style elements starts with a pound sign, as in #yz98. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<STYLE TYPE="text/css">

<!--

#z99y { letter-spacing: 2em }

-->

</STYLE>

</HEAD>

<BODY>

<P ID=z98y>This text has extra-wide letter spacing.</P>

</BODY>

</HTML>


How style sheets cascade
About cascading style sheets

How style sheets cascade

One of the fundamental features of CSS1 is that style sheets cascade—in other words, several style sheets may control the same document and override one other according to certain rules of precedence. You can build and embed or attach your preferred style sheet when authoring the page, but your viewers may have personal style sheets to customize the presentation of HTML pages to meet their own needs (if the browser supports this feature).

When several style sheets try to influence the presentation, conflicts may arise. These conflicts are resolved by assigning each style rule a weight. As an author using Adobe GoLive, you can assign a weight when referencing external style sheets (see Referencing external style sheets). By default, the viewer’s rules weigh less than the author’s rules. Consequently, if there are conflicts between the style sheets of a document loaded by the browser and the viewer’s personal sheets, the author’s rules will override the viewer’s rules. In any case, both the viewer’s and author’s rules override the browser’s default values.

Imported style sheets also cascade with one other, in the order they are imported. Any rules specified in the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the cascading order than rules in the style sheet itself.


The CSS1 formatting model
About cascading style sheets

 The CSS1 formatting model

Cascading style sheets are based on a simple block-oriented (or box-oriented) formatting model. Each element consists of one or more rectangular blocks (or boxes), each of which has a core content area with optional surrounding padding, border, and margin areas.

A. Block (or box) width B. Margin (transparent) C. Border D. Padding E. Content F. Element width

This formatting model gives you much more flexibility in controlling spacing between objects. For example, by setting the top margin of one element to a negative value, you can make it grow into another element directly above it.

To best visualize the block (or box) concept, choose a background color for an element: The result is a colored block that extends over the entire width of the page and whose height is controlled by its text content. You should set aside a little time to experiment with those properties—for example, set the padding to move the text within away from the edge of the block.

For instructions on setting the margin, border, and padding properties, see Block (box) properties.


About relative and absolute length units
About cascading style sheets

About relative and absolute length units

The format of a length value is an optional plus or minus sign (+ is the default), immediately followed by a number (with or without a decimal point,) immediately followed by a unit identifier such as em, ex, or, pc. Some properties allow negative length units, but this may complicate the formatting and there may be browser-specific limitations.

There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will scale more easily from one output medium to another (for example, from a computer display to a laser printer).

Relative units may also reduce the differences in font size that occur when a page is viewed on different platforms. (See About font sizes across platforms.)

The following relative units are supported:

em	Height of the element’s font
ex	Height of the letter X
pixel	Pixels relative to the resolution of the drawing areathat is, the computer display
Absolute length units are only useful when the physical properties of the output medium are known.

The following absolute length units are supported:

in	Inches, 1in. = 2.54 cm
cm	Centimeters
mm	Millimeters
pt	Points, 1pt = 1/72 in.
pc	Picas, 1pc = 12pt
Percentage units and keyword values (for example, xlarge) offer similar advantages in terms of scalability as relative units.


About percentage units
About cascading style sheets

About percentage units

The format of a percentage value is an optional plus or minus sign (+ is the default), immediately followed by a number (with or without a decimal point), immediately followed by the percent sign (%).

Percentage values are always relative to another value—for example, a length unit. Each property that allows percentage units also defines what value the percentage value refers to. Most often this is the font size of the element itself, such as line height.

Many style properties use keywords instead of numerical unit specifications—for example, XX-small through X-large to specify font size relative to the parent element.


About color units
About cascading style sheets

About color units

A color is either a keyword or a numerical RGB specification, such as any color from the Real Web Colors tab ( [image]) of the Color Palette.

The pop-up keyword color names are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The 16 colors are from the W3C palette.

Numerical color specifications use the RGB color model. The format of an RGB value in hexadecimal notation is a #, immediately followed by either three or six hexadecimal characters—for example, #FFFFFF for white. The format of an RGB value in the functional notation is rgb, followed by a comma-separated list of three numerical values.


Creating a style sheet
Using Cascading Style Sheets

Creating a style sheet

To create a style sheet, first you define it as an internal or external style sheet—that is either in the head section of a Web page or as a separate file. After you define the style sheet, you create styles and define properties for the styles. Finally, you reference an external style sheet from your page and apply the styles to your page elements.

To create a style sheet in the head section of a document:

1  Click the CSS button ( [image]) above the main content area of the document window to open the Style Sheet window.

2  Add styles to the style sheet. See Creating styles with tag selectors, Creating classes, and Creating IDs.

You can view the style sheet in Source view after adding the first style; it appears as a STYLE tag in the head section.

To create an external style sheet:

1  Choose File > New Special > New Stylesheet Document.

2  Add styles to the style sheet. See Creating styles with tag selectors, Creating classes, and Creating IDs.

3  Save the new style sheet in your site folder to ensure it appears in the site window and is within reach of the Point and Shoot feature. Make sure to include the .css extension in the style sheet filename.

For instructions on how to link a document with, or edit the newly created style sheet, see Referencing external style sheets.

See also:

Creating styles with tag selectors

Creating classes

Creating IDs


Creating styles with tag selectors
Creating a style sheet

Creating styles with tag selectors

One of the most useful features of cascading style sheets is the ability to reformat the visible part of an HTML document based on its structure—that is, its hierarchy of tags. By using tags as selectors, you can enhance the presentation of a document and maintain downward compatibility as a courtesy to viewers with non-CSS browsers. This means that users of 4.0 browsers will see the extra formatting that CSS permits, while the rest of your audience will see a plain (but structured) document.

You can use tag selectors in two different ways:

•   Simple tag selectors reformat all instances of a particular tag within your page. For example, if you create a style with h1 as the selector and the text properties 36 point and sans serif, all <H1> headers will appear that way.

•   Contextual tag selectors reformat all instances of a particular tag enclosed within another tag. For example, if you create a style with h1 i as the selector and assign a special text color, a CSS-savvy browser will display all <I> tags within <H1> headers as colored text.

To create a style based on a tag selector:

1  With the Style Sheet window in the foreground, click the New Tag button ( [image]) in the style sheet toolbar. The new style is listed under Tags, with its name selected.

2  In the Basics tab ( [image]) of the CSS Selector Inspector, name the tag selector in the Name text box, and press Enter.

Tag selectors are HTML start tags with the less than and greater than (< and >) characters stripped off—for example, h2 for second-level headers, p for plain-text paragraphs, i for italicized, and b for boldface inline formatting.

Note: You can reformat the hyperlinks in your page by using “A” as a tag selector.

3  In the CSS Selector Inspector, add style properties. For more information, see Defining style properties.

4  Any new style properties you add are automatically applied to paragraphs or blocks of text formatted with the tag used as the selector.

A. Basics tab of the CSS Selector Inspector B. Tag selector C. Style properties

Note: Adobe GoLive doesn’t display formatting created by contextual selectors. Preview your page in a 4.0 Web browser to see the result.


Creating classes
Creating a style sheet

Creating classes

You can apply classes to any selected block of text, independent of the structure of the HTML document. Typical uses of classes include distinctive formatting for warning notes or other special information-carrying elements that need to stand out from the rest of the text. You can also use classes to create typographical effects, such as varying font sizes or font colors within a word.

Note: Don’t use classes to visually structure a document. Not only will this effect be completely lost on visitors with non-CSS browsers, but even worse, they will see a completely unstructured presentation of your document. Instead, use classes for local formatting, such as for inline text or single paragraphs.

To create a style based on a class:

1  With the Style Sheet window in the foreground, click the New Class button ( [image]) in the style sheet toolbar. The new style is listed under Classes with its name selected.

2  In the Basics tab ( [image]) of the CSS Selector Inspector, type a class name in the Name text box, and press Enter.

You can use any alphanumeric character string as a class name—for example, myboldclass. You don’t have to type the leading period; Adobe GoLive does this automatically.

3  In the CSS Selector Inspector add style properties. For information on style properties, see Defining style properties.

4  To apply the class style, select a range of text (anything from a single character to multiple paragraphs) in the document window, and use the options in the Style tab of the Text Inspector. See Applying styles from internal style sheets.


Creating IDs
Creating a style sheet

Creating IDs

Unlike classes, which you can apply to an unlimited number of elements, IDs let you embed a specific style for a unique paragraph or range of text in your document. Use IDs for a headline with special formatting or any other text that needs unique treatment.

A. “TravelEZ” is a normal paragraph formatted with an ID. Style properties are font style and size, background and text color, margins, and padding. B. “The #1 Newsletter” is a normal paragraph formatted with an ID. Style properties include font style and size, and negative margins that let it overlap the “TravelEZ” item.

To create a style based on an ID:

1  With the Style Sheet window in the foreground, click the NewIdent (Windows) New ID (Mac OS) button ( [image]) in the style sheet toolbar. The new style is listed under ID with its name selected.

2  In the Basics tab ( [image]) of the CSS Selector Inspector, type a unique ID name in the Name text box—for example, #myheaderid, and press Enter.

You can use any alphanumeric character string with a leading pound sign (#) as the ID name. ID names may not contain spaces.

ID styles are listed under the “IDs” category.

3  In the CSS Selector Inspector add style properties. See Defining style properties.

4  Applying the ID style requires that you hand-edit the source code of your page. See Applying styles from internal style sheets.


Defining style properties
Using Cascading Style Sheets

Defining style properties

The CSS Selector Inspector contains all of the style properties that Adobe GoLive supports. These styles cover the major part of the CSS1 specification, with the exception of some style options that cause problems in all major browsers.

Currently, all 4.0 browsers display only a few style properties. Some properties work with a single browser only, some don’t work at all but cause no harm, and others cause a browser crash. When applying a style property to your pages, make sure you test it in all major browsers that support cascading style sheets. For a listing of browser-safe features, visit Web Review’s Style Sheets Reference Guide at http://www.webreview.com/guides/style/#charts.

See also:

Font properties

Text properties

Block (box) properties

Positioning properties

Border properties

Background properties

List & Others properties

Specifying unsupported properties


Font properties
Defining style properties

Font properties

The Font tab of the CSS Selector Inspector lets you define a font family and make font style settings, including color, font size, and line height.

A. Font text box B. Moves selected font in the list C. Font Set pop-up menu D. Font pop-up menu

To edit the font properties of a style:

1  Select a style in the Style Sheet window, and click the Font tab ( [image]) in the CSS Selector Inspector.

2  Choose a font color from the Color pop-up menu, or drag in a selection from the Real Web Colors tab ( [image]) of the Color Palette to set the foreground color property.

3  Enter a font size in the Size text box, choose an absolute, relative, length unit, or a percentage from the Units pop-up menu, and press Enter.

4  Enter a number in the Line Height text box. Line height is the distance between the baselines of two adjacent lines of text. Select a unit (use percent to maintain scalability) from the Units pop-up menu, and press Enter.

5  Choose a font style from the Style pop-up menu. Choose Unchanged to keep an element’s current font style unchanged when the new style sheet is applied.

6  Choose a font weight from the Weight pop-up menu. Values 100-300 are lighter than normal, and values 500 to 900 are heavier than normal. Lighter and Bolder apply font weights that are relative to the weight inherited from the parent element. Unchanged keeps an element’s current font weight unchanged when the new style sheet is applied.

7  Choose the style’s preferred font family and alternate font families to use if the font is not available on the Web viewer’s computer. To add font families to the Font Family list, do one of the following:

•   Choose a font set from the font set pop-up menu.

•   Click New, and choose a font from the font pop-up menu; or type a font name, and press Enter.

•   To change the order of preference, select an entry from the list, and use the Up and Down buttons to shift the selection.

The first available font family in the list will be used by the browser. If none of the listed fonts is available on the viewer’s system, a font that matches a listed font specification is used.

See Setting language and font preferences for instructions on setting default fonts for these general specifications.

8  Select font properties in the Decoration section to set a text-decoration property.


Text properties
Defining style properties

Text properties

The Text tab of the CSS Selector Inspector lets you define spacing, case, and alignment properties for the current style.

Text style properties

To edit the text spacing, case, and alignment properties:

1  Select a style in the Style Sheet window, and click the Text tab ( [image]) in the CSS Selector Inspector.

2  To set the text indent, choose a length unit or a percentage from the Units pop-up menu, type an indentation in the Text Indent text box, and press Enter.

3  To set word spacing (add to the default word spacing), choose a length unit from the Units pop-up menu, type a number in the Word Spacing text box, and press Enter.

4  To set letter spacing (adding to the default space between letters), choose a length unit from the Units pop-up menu, type a number in the Letter Spacing text box, and press Enter.

5  To set vertical alignment (the vertical positioning) of an element, type in a value, and choose an option from the pop-up menu:

•   Baseline aligns the baseline of the element with the baseline of the parent element.

•   Sub subscripts the element.

•   Super superscripts the element.

•   Top aligns the top of the element with the tallest element on the line (relative to the formatted line that the element is a part of).

•   Text Top aligns the top of the element with the top of the parent element’s font.

•   Middle aligns the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent.

•   Bottom aligns the bottom of the element with the lowest element on the line (relative to the formatted line that the element is a part of).

•   Text Bottom aligns the bottom of the element with the bottom of the parent element’s font.

6  To set small caps, choose Small Caps from the Font Variant pop-up menu.

7  To set the text case (Capitalize, Uppercase, or Lowercase) choose an option from the Transformation pop-up menu.

8  To set the text alignment (Left, Center, Right, and Justify), choose an option from the Alignment pop-up menu.


Block (box) properties
Defining style properties

Block (box) properties

The Block tab of the CSS Selector Inspector lets you define the properties of the block (or box) generated by the current style, including its visual and nonvisual properties. See The CSS1 formatting model.

A. Sets invisible element margins. B. Sets floating elementposition and size. C. Sets distance between border and element content. D. Formats element as a floating box. E. Clears or allows floating boxes on either side of the element.

To edit the block (box) properties of a style:

1  Select a style in the Style Sheet window, and click the Block tab ( [image]) in the CSS Selector Inspector.

2  To set the margins for a block (or box) element, choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and Bottom Margin text boxes. Or use the All Margins text box to specify the margin in all four directions at once. Press Enter.

You can also decrease the spacing between surrounding elements. Negative values cause two elements to overlap.

3  In the Padding section, set the spacing between the border and the content of any element formatted with the current style.

Choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and Bottom Padding text boxes. Or, to specify the spacing in all four directions at once, use the All Paddings text box. Press Enter.

4  Under Block, set the width and height properties for any element formatted with the current style. This property is most useful with referenced elements, such as images.

Choose a length unit or a percentage from the Units pop-up menu, and then type a number in the Width or Height text box, and press Enter. Leaving one property set to Auto ensures that the element is scaledproportionally. Leaving both width and height properties set to Auto displays the referenced item in its original size.

5  In the Float pop-up menu, set the float property to create an element that is not part of the normal flow of text. Choose any of the following options:

•   Left moves the element to the left, so the text wraps on the right side of the element.

•   Right moves the element to the right, so the text wraps on the left side of the element.

•   None causes the element to appear where it occurs in the text.

6  In the Clear pop-up menu, specify how an element accepts floating elements.

•   Left moves the element below any floating element on the left side.

•   Right moves the element below any floating element on the right side.

•   None allows floating elements on all sides.


Positioning properties
Defining style properties

Positioning properties

The Position tab of the CSS Selector Inspector lets you define the positioning properties of any floating element formatted with the style, including position, clipping behavior, rank in the stacking order, overflow behavior, and visibility.

A. Sets controls that position floating elements. B. Sets stacking order of floating elements. C. Sets display properties of excessive content in elements.

To edit the positioning properties of a style:

1  Select a style in the Style Sheet window, and click the Position tab ( [image]) in the CSS Selector Inspector.

2  Select a positioning method from the Kind menu:

•   Choose Absolute, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to specify the position of the floating element with respect to the upper left corner of the browser’s main display area.

•   Choose Static to let the element flow with the text.

•   Choose Relative, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to specify the position of the element with respect to the parent element.

3  To specify the size of the element, type measurements in the Width and Height text boxes.

4  To specify where and how the element is visually cropped when it overlaps with adjacent elements, select a clipping method from the pop-up menu:

•   Choose Auto to let the browser determine the clipping properties.

•   Choose Rect to crop the element to a rectangular box, and then type the measurement by which the element is to be cropped in the Top, Right, Bottom, and Left text boxes.

5  Set the stacking order of floating elements by assigning a numeral to each layer in the Z-Index text box. If two elements overlap, the one with the higher z-index conceals a portion of the other.

6  In the Overflow pop-up menu, set the overflow property to determine how the element will behave if its content outgrows its specified size. Choose any of the following options:

•   Visible causes the element to grow with its content.

•   Scroll adds a vertical or horizontal scrollbar to the element.

•   Hidden hides excessive content.

•   Auto defaults to the browser’s preferences for handling excessive content.

7  In the Visibility pop-up menu, set the visibility property to determine whether the element is displayed or not when the browser loads the page. The visibility property is useful as an initial setting that scripting will override. Choose any of the following options:

•   Inherited assumes the visibility property of the parent element.

•   Visible lets you display the element when the browser loads the page.

•   Hidden hides the element from view.


Border properties
Defining style properties

Border properties

The Border tab of the CSS Selector Inspector lets you set the borders of the block (or box) generated by a style, including line width, color, and line style. See The CSS1 formatting model for more information.

A. Line width, color, and line style for each physical border B. All Borders controls

To edit the border properties of a style:

1  Select a style in the Style Sheet window, and click the Border tab ( [image]) in the CSS Selector Inspector.

2  To set the border width for the top, right, left, or bottom borders, choose a unit from a Units pop-up menu, type a number in a border text box, and press Enter. Use the All Borders controls to set all four borders at once.

3  Choose a border color from the Color pop-up menu, or drag a selection from the Real Web Colors tab ( [image]) of the Color Palette.

4  Choose a line style from the Line Style pop-up menu.


Background properties
Defining style properties

Background properties

The Background tab of the CSS Selector Inspector lets you set the background of the block (or box) generated by a style. You can use an image or color as a background. See The CSS1 formatting model for more information.

To edit the background properties of a style:

1  Select a style in the Style Sheet window, and click the Background tab ( [image]) in the CSS Selector Inspector.

2  To set a background image, select the Image option, type a URL for the image file, and press Enter. You can also click Browse and locate the file, or use Point and Shoot to link to an image in the site window. Select Absolute to use an absolute path (see Setting up absolute paths).

When you set a background image, also set a background color that will be used when the image is unavailable.

3  To set a background color, choose one from the Colors pop-up menu, or drag a selection from the Web-Safe Colors tab ( [image]) of the Color Palette.

4  To tile image horizontally, vertically, or in both directions, choose an option from the Repeat pop-up menu.

•   Repeat tiles the image both horizontally and vertically.

•   Repeat x tiles the image horizontally.

•   Repeat y tiles the image vertically.

•   Once sets this property to no-repeat, disabling tiling.

5  To set a background to scroll or not scroll with other elements on the page (background-attachment property), choose an option from the Attach pop-up menu.

•   Choose Scroll if you want the image to scroll.

•   Choose Fixed if you don’t want the image to scroll.

6  To set the position of the image within the element block (or box), choose a length unit, a percentage, or any of the Left, Center, Right, or Top, Center, Bottom keyword options from the Top and Left Units pop-up menu, type a number in the Top and Left text boxes, and press Enter.


List & Others properties
Defining style properties

List & Others properties

The List & Others tab of the CSS Selector Inspector allows you to set the appearance of list item markers—for example, the appearance of a bullet in a bulleted list. You can set list item marker shapes and marker positioning, or a custom image to serve as the marker.

A. Image used as a list marker B. Style for the list marker C. Position of list marker relative to text D. Unsupported CSS properties E. Unsupported property name and value text boxes

To edit the list item marker properties:

1  Select a style in the Style Sheet window, and click the List tab ( [image]) in the CSS Selector Inspector.

2  To use a custom image as a list item marker, select the Image option, type a URL for the image file, and press Enter. You can also click Browse and locate the file, or use Point and Shoot to link to an image in the site window. Select Absolute to use an absolute path (see Setting up absolute paths).

3  To set the type of the list item marker, choose from the following options in the Style pop-up menu.

•   For bulleted lists, choose Disc, Circle, or Square.

•   For numbered lists, choose Decimal, Lower Roman, Upper Roman.

•   For alphabetical lists, choose Lower Alpha and Upper Alpha.

4  To set the position where the list item marker appears, choose one of the following from the Position pop-up menu:

•   Inside sets the list item marker flush with the second, third, and following lines of text.

•   Outside adds a first-line indent, letting the list item marker stand out from the rest of the text (like the bullet at the start of this item).


Specifying unsupported properties
Defining style properties

Specifying unsupported properties

To ensure upward compatibility with future releases of the CSS Specification, Adobe GoLive lets you specify as yet unsupported properties and their values.

To specify an unsupported property for a style:

1  Select a style in the Style Sheet window, and click New in the List tab ( [image]) of the CSS Selector Inspector. A property-name and property-value pair appears in the two text boxes below the list box.

2  Enter the new property name, type a value in the Value text box, and press Enter.

View and check your entry in the Basics tab of the CSS Selector Inspector.


Managing styles
Using Cascading Style Sheets

Managing styles

You rename styles in the CSS Selector Inspector and duplicate or delete styles in the Style Sheet window.

To duplicate a style:

Select the style in the Style Sheet window, and click the Duplicate button ( [image]) in the style sheet toolbar. Duplicating a style creates an exact copy, complete with all style properties.

To delete a style:

Select the style or styles in the Style Sheet window, and choose Edit > Clear.

To rename a style or view its properties:

Select the style in the Style Sheet window or the CSS tab ( [image]) of the Web Database (see The CSS tab). The styles properties are listed in the Basics tab ( [image]) of the CSS Selector Inspector.

To rename the style, select the style name in the Name text box, and type a new name. Don’t forget the pound sign (#) in front of ID names (see Creating IDs). Adobe GoLive automatically inserts the period in front of CLASS names.


Applying styles and referencing style sheets
Using Cascading Style Sheets

Applying styles and referencing style sheets

After you’ve created internal and external style sheets, you need to apply the styles to your pages. External style sheets also need to be referenced from your pages.

See also:

Applying styles from internal style sheets

Referencing external style sheets


Applying styles from internal style sheets
Applying styles and referencing style sheets

Applying styles from internal style sheets

Styles are applied in three different ways, depending on their selectors. Styles that use tag selectors are applied automatically. Classes require that you select text and apply them manually using the Style tab of the Text Inspector. The Style tab lists all classes in a page’s internal or external style sheets.

IDs are a special case because of ambiguities that are still unsolved in the cascading style sheets specification. The current release of Adobe GoLive lets you create IDs, but you have to hand-code in the Source view to use them in your page.

See also:

To apply classes

To apply an ID


To apply classes
Applying styles from internal style sheets

To apply classes:

Do one of the following:

•   To create an inline style for selected text in a paragraph, in the Style tab of the Text Inspector, select the checkbox in the Inline column for the style you want to apply.

•   To format an entire paragraph with a style, click in the paragraph, and then in the Style tab of the Text Inspector. Select the checkbox in the Par column for the style you want to apply.

•   To create a division that is disconnected from the normal flow of HTML, click in a paragraph and then in Style tab of the Text Inspector. Select the checkbox in the Div column for the style you want to apply.

•   To apply a format to the body section of a page, click anywhere in the document, and then in the Style tab of the Text Inspector. Select the checkbox in the Area column for the style you want to apply.

See also:

To apply an ID


To apply an ID
Applying styles from internal style sheets

To apply an ID:

1  Note the name of the desired ID from the Style Sheet window.

2  In the Source view of the document window, find the paragraph or block of text to which you want to assign the ID, and remove all other formatting to reduce the risk of ambiguity.

3  If the text to be reformatted is a paragraph, hand-edit the <P> tag by inserting the ID as an attribute in the start tag. For example, if the ID name is #headerbox, edit the code as follows:

Your original source code looks like this:

<P>TravelEZ</P>

After you insert the ID attribute, your source code should look like this:

<P ID="headerbox">TravelEZ</P>

4  If the text to be reformatted is a block of text within a paragraph, you will have to enclose that text in a <SPAN> or <DIV> tag and insert the ID as an attribute in the start tag. For example, if the ID name is #headerbox, edit the code as follows:

Your original source code looks like this:

<P>Welcome to TravelEZ</P>

After you insert the <SPAN> tag with the ID attribute, your source code should look like this:

<P <SPAN ID="headerbox">Welcome to TravelEZ</SPAN></P>

5  Switch back to Layout view to view the effect. If you are not satisfied with the result, select the ID style in the Style Sheet window, and edit its properties as desired.

See also:

To apply classes


Referencing external style sheets
Applying styles and referencing style sheets

Referencing external style sheets

The External tab of the Style Sheet window lists all external style sheets referenced by the current page. In conjunction with the style sheet toolbar and the External Style Sheet Inspector, it also lets you link to an external style sheet, both on your local hard disk and on the Web.

Referenced style sheets appear here, complete with the URL path to their storage location.

See also:

To reference an external style sheet

To quickly change the style sheet referenced by multiple pages


To reference an external style sheet
Referencing external style sheets

To reference an external style sheet:

1  Click the External tab in the Style Sheet window.

2  Click the New Item button ( [image]) in the style sheet toolbar.

3  A new empty reference to an external style sheet appears in the Style Sheet window.

An empty reference is a placeholder for linking with a physical style sheet.

4  Select the empty reference, and go to the External Style Sheet Inspector.

5  In the External Style Sheet Inspector, type in the URL path and filename of the style sheet in the URL text box, click the Browse button to locate the style sheet in the file selection dialog box, or click the Point and Shoot button ( [image]) to link to a style sheet in the site window.

A. Link to an external style sheet. B. Open an external style sheet for editing. C. Change the cascading order of multiple external style sheets.

6  Reference additional style sheets as needed.

If the referenced style sheet contains tag selectors that match the HTML tags used in your document, the document will be reformatted automatically.

7  Use the Move Up and Move Down buttons to change the cascading order for documents with several external style sheets. The Move Up button increases the weight of a style sheet. If conflicts arise between style rules, its styles take precedence over those from style sheets that are lower in the cascade. The Move Down button decreases the weight of a style sheet.

With the style sheet referenced, you can edit it (if it is not write-protected) by selecting the style sheet in the Style Sheet window, and then clicking Open in the External Style Sheet Inspector.

An easy way to link a page with a style sheet document within the same site is to drag the style sheet file icon from the site window to the small page symbol above the main content area of the document window. After linking the page, the styles from the style sheet will be available for formatting visual page content.

See also:

To quickly change the style sheet referenced by multiple pages


To quickly change the style sheet referenced by multiple pages
Referencing external style sheets

To quickly change the style sheet referenced by multiple pages:

1  Create a new style sheet document, and save it as part of your site. The Save dialog box has a shortcut menu that lets you navigate to any open site document.

Use the same style names as in the original style sheet, and your pages will reformat automatically.

2  In the site window, select the .css file you want to replace.

3  In the Link Inspector, locate the icon of the style sheet document you want to replace, and use the Point and Shoot feature on the new style sheet document.

4  In the Change Reference dialog box, click OK to confirm the change.

When you open a page that references a style sheet, it will contain a new set of styles. If the new style sheet uses the same style names as the previous one, your page will be reformatted with the new styles.

See also:

To reference an external style sheet


Previewing with cascading style sheets
Using Cascading Style Sheets

-Previewing with cascading style sheets-

The Layout View Controller contains a selection of tools for previewing pages formatted with cascading style sheets. It lets you disable style sheets to view the page as it would appear in a non-CSS browser or choose one of the default style sheets from the Web Database (see The CSS tab) to simulate the appearance of your page in several browsers on the two major platforms.

A. Preview elements with negative margin values. B. Preview a page on multiple platforms.

To use CSS options in the Layout View Controller:

1  In Layout view, click the eye button ( [image]) in the upper right corner of the document window to open the Layout View Controller.

2  Select Use StyleSheets to toggle CSS formatting on and off and check if the page looks acceptable in plain HTML.

3  Select Allow overlapping paragraphs to preview how elements with negative margin values grow into adjacent elements.

4  Select the options from the Root menu one by one to simulate the look of your page in Windows-based or Macintosh-based browsers. This previewing feature is based on the default style sheets stored in the CSS tab ( [image]) of the Web Database (see The CSS tab).

5  Select an option from the Links menu to mark up hyperlinks with extra CSS formatting.

6  Choose an option from the Mark Style menu to mark elements formatted with classes or IDs.

7  Select an option from the Links menu to mark tags formatted with tag selectors.


Editing QuickTime Movies

About QuickTime authoring

Opening and editing QuickTime movies

Adding video tracks

Adding effect tracks

Using sprite tracks

Using Sound and Music Tracks

Using an HREF track

Using a chapter track

Using text tracks


About QuickTime authoring
Editing QuickTime Movies

About QuickTime authoring

Adobe GoLive enables multimedia authors to create movies for the Web and edit them using many of the features of the Apple Computer QuickTime(TM) 3.0 authoring suite.

Adobe GoLive lets you create and save movies as QuickTime documents as well as alter existing and newly created movies. You can insert new tracks from the Palette via drag and drop, including video tracks, effect tracks, sprite tracks, sound and music tracks, HREF tracks, chapter tracks, and text tracks.

Adobe GoLive also supports the following QuickTime 3.0 editing and import options:

•   Import a variety of different audio and video file formats.

•   Resize movies. A movie has two size properties: the normal size and the current size. The normal size is determined by the boundary of the visual tracks. If you want to scale this size, you will have to scale each track in the inspector. The current size is changed if you use the pop-up menu to manually alter the window size. In general, you would want to set the current size to the value of the normal size. Do this by clicking Default. If you save the movie with this setting, the current size matches the normal size. Remember that the QuickTime plug-in always uses the current size of the movie.

Note: When you use the pop-up menu to resize your movie window, make certain the upper-left corner of your window is visible on your screen, otherwise, your window may disappear. If your window is larger than your screen, first click the window maximize button to shrink your window to fit within your monitor.

•   Copy and paste content from any supported format to create a new QuickTime movie.

•   View images from a wide variety of sources including JPEG, BMP, and PNG formats.

•   Enhance movies with transitions and filters for sharpening, color tinting, embossing, and many more.

•   Import (but not edit) many other media supported by QuickTime 3.0.


Opening and editing QuickTime movies
Editing QuickTime Movies

Opening and editing QuickTime movies

You edit QuickTime movies by creating a new movie or open an existing movie, and then viewing it in the Adobe GoLive movie viewer, adding tracks or changing timing in the timeline editor, and setting track properties in the Video Inspectors.

To create a movie:

Choose File > New Special > New QuickTime Movie. After you save the movie, Adobe GoLive opens an empty Movie Viewer window.

To open and view a movie:

Choose File > Open, and navigate to the movie and open it. The movie opens in the Movie Viewer window. Any edits you make in the Track Editor appear instantly in the main display area of the Movie Viewer.

A. Click to open the Track Editor for the current movie. B. Window Size menu

The Movie Viewer window has two controls:

•   The Window Size menu lets you resize the Movie Viewer window. The Default option restores the window to the original size of the movie document.

•   The Open Track Editor button ( [image]) opens the Track Editor for the movie currently displayed in the Movie Viewer window.

See also:

Using the Track Editor

Viewing movie properties and adding annotations

Saving a QuickTime movie


Using the Track Editor
Opening and editing QuickTime movies

Using the Track Editor

The Track Editor is a full-featured editor for all time-based data formats supported by QuickTime 3.0. It has many of the same controls as the TimeLine Editor for DHTML animation.

A. Show Movie button B. Standard video track C. Filter track with transitions D. Bars show effect start and end times. E. Loop F. Palindrome control G. Playback controls H. Time Scale slider

The track list at left of the Track Editor shows the tracks in the current movie. The type of each track is identified by its name: Standard movie tracks are named Video Track 1, Video Track 2, etc. Sound tracks appear as Sound Track 1, Sound Track 2, etc. You select a track by clicking its name in the track list. To delete a selected track, choose Edit > Cut.

Depending on the type of media a track contains, it has either one or two controls:

•   For video effect tracks, sprite tracks, HREF tracks, and chapter tracks, the triangle control ( [image]) expands and collapses the track. In expanded view, the Track Editor displays the content of the track, such as text, sprite subtracks, video effects, HREFs, and chapters. In collapsed view, all tracks appear as bars.

•   For all tracks with visible content, the eye icon ( [image]) makes tracks visible or not visible in the Movie Viewer window. This is equivalent to activating and deactivating tracks.

The main window area displays a bar that represents the media on each track. The left edge of the bar marks the start time, the right side the end time of the track.

Arranged below the track list is a collection of controls that let you influence the looping behavior and control playback:

•   The Loop button ( [image]) plays the movie in a simple endless loop. When reaching the end of the movie, it jumps back to the start and resumes playing, repeating this cycle infinitely.

•   With the Palindrome button ( [image]) clicked, the movie bounces back and forth between its start and end points. (The Loop button must be clicked to enable the Palindrome button.)

•   The Step Backward button ( [image]) rewinds the movie by a single frame with each click.

•   Clicking the Stop button ( [image]) once stops movie playback in the Movie Viewer window. Double-clicking the Stop button returns the movie to the start.

•   The Play button ( [image]) launches movie playback in the Movie Viewer window. Clicking this button during playback pauses the movie. Clicking it again resumes playback.

•   Each mouse click on the Step Forward button ( [image]) advances the movie a single frame in the Movie Viewer and Track Editor windows.

The slider control to the right of the looping and playback buttons controls the time resolution of the film. This makes it easier to examine the timing relationships of the various tracks in multiple track movies. Its nonlinear scale extends from one frame (maximum resolution) to one minute (minimum resolution).

A. Time Cursor B. Track bars C. Time resolution slider D. Keyframes

By dragging the slider control to the right, you can decrease the time resolution and compress the track bars until they fit in the main window area. This allows you to survey a larger section of the movie or the entire movie at a time. The graphic above shows the effect of compressing the display to 50 percent (two frames instead of one). By dragging the slider control to the left, you maximize time resolution, which increases the level of detail with which the tracks are displayed. The default time resolution is 6 frames per second. Any changes you make are saved between sessions.


Viewing movie properties and adding annotations
Opening and editing QuickTime movies

Viewing movie properties and adding annotations

The QuickTime Inspector appears whenever you open or create a movie in Adobe GoLive. It disappears when you open the QuickTime Track Editor and click to select a track. You can restore it at any time by clicking the movie in the Adobe GoLive Movie Viewer. You use the QuickTime Inspector to view information about a movie and to annotate a movie.

To view movie information:

Click the movie in the Movie Viewer and then click the Basic tab.

The Basic tab of the QuickTime Inspector provides technical information on the movie, including the number of tracks it contains, its duration, the size of the movie file in bytes, the data rate available per second during playback, as well as the physical dimensions of the movie.

To annotate a movie with production comments:

1  Click the movie in the Movie Viewer to show the QuickTime Inspector, and then click the Annotation tab.

2  Select a category (such as Author or Producer from the pop-up menu at the top of the Inspector window. Annotation categories provide a convenient way to pass information to different people authoring the movie.

3  Type your comment in the text box or edit an existing comment.

4  Click Add to add your comment to the movie, or click Replace if you have made changes to existing annotation text.

5  To delete all the existing text for the selected category, click Delete.


Saving a QuickTime movie
Opening and editing QuickTime movies

 Saving a QuickTime movie

You save a movie by choosing File > Save. On Mac OS you then choose either Flatten or Fast Save. On Windows, movies are always saved ready to upload to your site.

•   Flatten saves the movie as a self-contained document, resolving all data references to other movies you may have imported media from. This option compresses the movie and should only be used when saving the movie for final publication on the Web.

•   Fast Save saves your changes immediately without resolving data references or applying maximum compression. Use this option to save the movie while you are working on it.

Note: Flatten involves intensive file size optimization operations and may take some time to accomplish.


Adding video tracks
Editing QuickTime Movies

Adding video tracks

A video track in a QuickTime movie is a standard structure for holding visual data, such as digitized video. It consists of a number of sequential pixel images that play back at a certain speed (referred to as the frame rate, expressed in frames per second) to give the viewer the visual impression of motion.

See also:

Inserting tracks

To insert a video track and import the first visible video track of another movie

To insert a track by copying it from another movie

Setting the properties of a video or other visible track


Inserting tracks
Adding video tracks

Inserting tracks

You can add video tracks to your movie by either importing the first visible video (or other visible track) from another movie, or by copying any video track from another movie and pasting it into your movie.


To insert a video track and import the first visible video track of another movie
Adding video tracks

To insert a video track and import the first visible video track of another movie:

1  Open or create a movie. See Opening and editing QuickTime movies.

2  In the Movie Viewer window, click the Open Track Editor button ( [image]) to open the Track Editor.

3   Drag the Video Track icon from the QuickTime tab of the Palette onto the main window area of the Track Editor.

4  Navigate to and select a movie that you want to import, and click Open. Adobe GoLive imports the first visible track of the movie and its name appears in the track list.

5  In the Video Track Inspector, rename the track by entering a name in the text box next to the Video Track icon, and then set other track properties. For information on viewing and setting track properties, see Setting the properties of a video or other visible track.

See also:

Inserting tracks

To insert a track by copying it from another movie

Setting the properties of a video or other visible track


To insert a track by copying it from another movie
Adding video tracks

To insert a track by copying it from another movie:

1  Choose File > Open and open the movie that contains the track you want to copy.

2  In the Movie Viewer window, click the Open Track Editor button ( [image]) to open the Track Editor for movie you want to copy the track from.

3  Select the track you want to copy from the track list on the left, and then choose Edit > Copy. (You can select and copy only one track at a time.)

4  Open the movie you are adding the track to if its not already open, and then in the Movie Viewer window, click the Open Track Editor button ( [image]).

5  Choose Edit > Paste. The new track appears in the Track Editor window of your movie.

6  In the Video Track Inspector, rename the track by entering a name in the text box next to the Video Track icon, and then set other track properties. For information on viewing and setting track properties, see Setting the properties of a video or other visible track.

You are now ready to add additional tracks for sprites, QuickTime video effects, sound, and other media.

See also:

Inserting tracks

To insert a video track and import the first visible video track of another movie

Setting the properties of a video or other visible track


Setting the properties of a video or other visible track
Adding video tracks

Setting the properties of a video or other visible track

The Video Track Inspector allows you to view and edit several properties of a track:

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Left and Top
Setting the properties of a video or other visible track

Left and Top

Position the track.

See also:

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Width and Height
Setting the properties of a video or other visible track

Width and Height

Set the vertical and horizontal dimensions of the movie box as it appears in the Web page. The actual size of the movie is determined by the resulting boundary size of all visible tracks.

See also:

Left and Top

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Constrain Proportions
Setting the properties of a video or other visible track

Constrain Proportions

Resizes the movie proportionally. For example, when you edit the value in the Width text box, the height is adjusted to maintain the original aspect ratio of the track.

See also:

Left and Top

Width and Height

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Layer
Setting the properties of a video or other visible track

Layer

Sets the layering of the video track within the movie. The lower the layer number you enter, the farther to the front the track appears.

See also:

Left and Top

Width and Height

Constrain Proportions

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Graphics Mode
Setting the properties of a video or other visible track

Graphics Mode

Choose one of the following options from the Graphics Mode pop-up menu to specify how the video track overlays on other tracks within the movie:

Color for Blend and Transparent graphics modes

•   Dither Copy (default mode) simply overlays the image on a track directly below it and applies dithering to make it look better. There is no interaction between a track in Copy mode and tracks below it.

•   Copy mode does basically the same as Dither Copy, but its lack of dithering capability makes it less suitable for display on systems in 256-color mode. However, this option may provide better performance in low memory situations.

•   Blend mode makes the track translucent, so you can partially see through to the track below. The degree and color of the transparency can be set by clicking the color field next to the Graphics Mode pop-up menu, which brings up the Color Palette. In the Color Palette, you choose a color and then drag it from the preview pane at the top to the Graphics Mode color field in the Sprite Track Inspector. The lighter the color, the less translucent the track will be; the darker the color, the more translucent it will be.

•   Transparent mode lets you define a transparent color for any visual track. Choose the color as described under Blend mode.

The next four modes are all based on alpha channels. An alpha channel defines how an image is combined with a background image already present at the location where the image will appear. By defining an alpha channel you specify which part of a visible image should be left out (the proper term is “masked”) in order to make a background image appear in that area. The “alpha” graphics modes in this menu enable Adobe GoLive to display movies with alpha channel content:

•   Straight alpha means that the color components of each pixel should be combined with the background pixel at the same location based on the value contained in the alpha channel.

•   Premul white alpha supports images created on a white background with a premultiplied alpha channel.

•   Premul black alpha supports images created on a black background with a premultiplied alpha channel.

•   Straight alpha blend is a combination of straight alpha and blend, so the masked areas will be transparent, and the non-transparent areas will be translucent. As with the Blend mode, you can use the Color Palette to edit the degree of translucency.

•   Composition (Dither Copy) mode is similar to Copy and Dither Copy, but more appropriate for video tracks created from animated GIF files.

The other fields are not user-editable. They are updated automatically as you edit the track.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Start Time

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Start Time
Setting the properties of a video or other visible track

Start Time

The start time of the track, which is usually “time zero.” You can change the start time of a track by clicking its bar in the Track Editor and dragging it in the desired direction.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Duration

Track Type

Data Size

Data Rate

Colors

Data Format


Duration
Setting the properties of a video or other visible track

Duration

The duration of the track. This property is not editable for video tracks.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Track Type

Data Size

Data Rate

Colors

Data Format


Track Type
Setting the properties of a video or other visible track

Track Type

This text field shows the track type. You can’t change the track type, but you can delete a track you don’t want and insert a new track of the proper type.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Data Size

Data Rate

Colors

Data Format


Data Size
Setting the properties of a video or other visible track

Data Size

This indicates the type of compressor used.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Rate

Colors

Data Format


Data Rate
Setting the properties of a video or other visible track

Data Rate

This text field indicates the amount of data available to be played every second.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Colors

Data Format


Colors
Setting the properties of a video or other visible track

Colors

This text field shows the color depth of the movie—for example, Thousands or Millions of colors.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Data Format


Data Format
Setting the properties of a video or other visible track

Data Format

The compressor used on the video content.

See also:

Left and Top

Width and Height

Constrain Proportions

Layer

Graphics Mode

Start Time

Duration

Track Type

Data Size

Data Rate

Colors


Adding effect tracks
Editing QuickTime Movies

Adding effect tracks

The Track Editor lets you use multiple effects in a movie and specify exactly when they should start. Its ability to handle multiple tracks also enables multimedia author s to use transitions in their movies. The following illustration shows the Gradient Wipe effect applied to a movie with two video tracks.

Gradient wipe fading in and out

Effects and transitions have their own track in the Track Editor, referred to as effect tracks or filter tracks. If you apply a filter to video sources, all the data of the sources is sent to that filter track. The original video tracks won’t be displayed because the filter track has taken control. Each effect persists until a new effect follows on the effect track. Filter tracks must cover the entire movie time. If you use multiple effects on a track, they share the time given by the maximum duration of the video tracks they manipulate. There are three basic types of effects:

•   There are three generic effects, two of which need no source track for video data: Fire and Cloud. The third effect, Ripple, is applied to any combination of visible tracks below it.

•   Single-source effects, also referred to as “filters,” are applied to a single track only and change its visual presentation. In some situations you may need to add “do nothing” filters. Examples include Blur, Color Tint, Edge Detection, and Emboss.

•   Dual-source effects, or transitions, fade out one track and fade in another. Examples include Cross Fade, Explode, Implode, and Gradient Wipe.

The following section explains how you use an effect on a movie, using one example for each type of effect. In each section you will find a reference with brief descriptions of the QuickTime video effects available in Adobe GoLive.

See also:

Inserting and applying effects

About Adobe GoLive filter effects

About Adobe GoLive transition effects


Inserting and applying effects
Adding effect tracks

Inserting and applying effects

You can use QuickTime video effects to obtain a dual-source effect, or transition, that fades out one track and fades in another.

To insert a filter track and apply a generic, filter, or transition effect:

1  With a movie open in the Movie Viewer, click the Open Track Editor button ( [image]).

2  Drag the Filter Track icon from the QuickTime tab ( [image]) of the Palette onto the main window area of the Track Editor. A new empty effect track appears in the track list.

3  In the Basic tab of the Video Effect Track Inspector, enter the track name in the text box next to the Video Effect Track icon.

4  Make sure you have the following tracks in your movie:

•   For Cloud or Fire generic effect: One effect track only. Anything below that track is invisible.

•   For Ripple generic effect: Any number of tracks, with an effect track on top. This effect is applied to any combination of tracks below it.

•   For a filter effect: one video track and an empty effect track in your movie. (If you have two tracks, the top track in the Track Editor will be invisible.)

•   For a transition effect: two video tracks and one empty effect track. (If you have more than two tracks, the top track in the Track Editor will be invisible.) In the Track Editor, the two video tracks should be at the top now, and the effect track at the bottom.

5  Click the small triangle control next to the track name in the Track Editor to expand the newly inserted effect track.

6  With the effect track selected in the Track Editor, click the Effects tab of the Video Effect Track Inspector, and then click Generic, Filter, or Transition.

7  If you are applying a filter effect, choose a track from the Source A pop-up menu.

8  If you are applying a transition effect, choose a track from the Source A pop-up menu and a track from the Source B pop-up menu.

9  Click New to insert a new effect, and then in the Select Effect dialog box, select an effect. See About Adobe GoLive filter effects and About Adobe GoLive transition effects.

10  Set the effects controls in the right side of the dialog box. The preview pane in the lower left corner of the dialog box shows what the effect will look like.

11  Click OK to apply the effect to the movie, and then click the Play button ( [image]) in the Track Editor to view the effect.

The first effect is as long as the movie. If there is no other media in the movie, then the duration defaults to one second.

12  To set the effects duration, click the effect in the Track Editor and use the up and down arrows next to the Duration option in the Video Effect Track Inspector.

13  To insert an additional effect, return to the Effects tab of the Video Effect Track Inspector and position the time cursor by clicking the up and down arrows next to the Start option. Click the New button to insert a new segment on the effects track, and then choose the next effect.

14  If you are not satisfied with the result, click the bar on the effect track to select the new effect, and then return to the Effects tab of the Video Effect Track Inspector. Click Edit to display the Select Effect dialog box and select another effect or change the settings.


About Adobe GoLive filter effects
Adding effect tracks

About Adobe GoLive filter effects

Adobe GoLive comes with the following QuickTime video filters built in:

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Alpha Gain
About Adobe GoLive filter effects

Alpha Gain

The alpha gain filter manipulates the alpha channel of a single track. This operation is commonly applied before passing the track to the Alpha Compositor effect described in Alpha Compositor. The Alpha Gain effect has several parameters:

•   Bottom pin: The minimum value that the alpha channel can take after the gain and offset parameters have been applied.

•   Top pin: The maximum value that the alpha channel can take after the gain and offset parameters have been applied.

•   Gain: This value is multiplied by the original alpha channel value.

•   Offset: This value is added to the old alpha channel, after it has been multiplied by the gain parameter.

See also:

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Blur
About Adobe GoLive filter effects

Blur

This effect applies a convolution blur effect to a single track. The Blur effect has two parameters:

•   Amount of blurring: This pop-up menu provides a choice of values, from 1 (least) to 7 (most). The larger the value, the longer the effect will take to run and the greater the degree of blurring.

•   Brightness: The default value of 1.0 blurs the source track but doesn’t change its brightness. Values between 0.0 and 1.0 decrease brightness; values greater than 1.0 increase brightness.

See also:

Alpha Gain

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Color Style
About Adobe GoLive filter effects

Color Style

This effect allows you to apply two color change effects to a single track. Both effects process the red, green, and blue components of each pixel independently. The color style effect offers two options:

The first option, Solarization, adjusts the color balance of the source track by generating a table of replacement color values from two parameters. The table starts at zero intensity and increases to the maximum intensity at the peak point. After that it falls back to zero. It has three controls:

•   Solarize Amount: This slider control adjusts the maximum intensity of the solarization table.

•   Solarize Point: This slider control adjusts the peak point of the solarization table.

The second effect, Posterization, produces a “color banding” effect. It reduces the number of colors in an image by replacing all pixels whose color is in a consecutive range with the middle color from that range. It has a single slider control:

•   Posterize amount: The number of colors that are grouped and replaced with the mid-range color.

See also:

Alpha Gain

Blur

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Color Tint
About Adobe GoLive filter effects

Color Tint

This filter converts the track to grayscale, and then applies a light and a dark color to the image. The light color replaces the white in the grayscale image, and the dark color replaces the black. The end result is a tinted duochrome version of the source image.

This filter has several controls.

•   Tint Type: This pop-up menu lets you select from a choice of four different tints, including Black and White, X-Ray, Sepia, and Cobalt.

•   Light color: This color replaces the white of the grayscale image.

•   Dark color: This color replaces the black of the grayscale image.

•   Brightness: Adjusts the brightness of the source between -255 (all colors are replaced with black) and 255 (all colors are replaced with white). A value of 0 will leave the brightness unchanged.

•   Contrast: Adjusts the contrast of the source between -255 (minimum contrast) and 255 (maximum contrast). A value of 0 will leave the contrast unchanged.

See also:

Alpha Gain

Blur

Color Style

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


ColorSync
About Adobe GoLive filter effects

ColorSync

(Mac OS only) This effect adjusts the color balance of an image to match a specified color sync profile. Typically, you would use this to adjust the color profile of an image to match the current display device. This allows you to maintain accurate color representations across devices. You specify both the color sync profile of the source image and the color sync profile of the destination device the image will be displayed on. The color sync filter has two parameters:

•   Source profile: The color sync profile of the source image.

•   Destination profile: The color sync profile of the target device.

See also:

Alpha Gain

Blur

Color Style

Color Tint

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Edge Detection
About Adobe GoLive filter effects

Edge Detection

This effect applies an edge detection convolution to a single track. The performance of the edge detection is determined by the convolution kernel. This is a matrix of values applied to each pixel of the source to produce the resulting image. This effect has two parameters:

•   Edge thickness: This pop-up menu gives you a choice of seven values, from 1 (least) to 7 (most). The larger the value, the thicker the edges in the resulting image.

•   Colorize Result: If this option is selected, the edges produced are colorized, based on the color of the source pixels around them. Otherwise, edges are rendered as light gray against a dark gray background.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Emboss
About Adobe GoLive filter effects

Emboss

This effect applies an emboss convolution to a single track. This effect has one parameter only:

•   Amount of Embossing: This pop-up menu gives you a choice of seven values, from 1 (least) to 7 (most). The higher the value, the heavier the embossing effect.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Film Noise
About Adobe GoLive filter effects

Film Noise

This effect simulates effects that are seen on aged film stock. It can be used to make a video source appear as if it has suffered the effects of age and wear. The film noise effect offers the options of hairs and scratches. These simulate hairs lying on the surface of the film, and vertical or near-vertical one-pixel lines that simulate scratches. Five parameters can be adjusted to control the visual impression:

•   Hair density: This parameter controls the number of hairs that are drawn on each frame and the frequency with which they appear.

•   Hair length: The maximum length (in pixels) of the hairs being drawn.

•   Scratch density: This parameter controls the number of scratches that are drawn on each frame and the frequency with which they appear.

•   Scratch duration: The maximum number of frames that each scratch appears for.

•   Scratch width: The maximum width, in pixels, of a scratch.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance

Sharpen


Dust and Film Fading
About Adobe GoLive filter effects

Dust and Film Fading

These effects simulate dust particles on the surface of the film, combined with an overall change in the color of the film stock. Three parameters let you modify the appearance of this effect:

•   Dust density: This parameter controls the number of dust particles that are drawn on each frame and the frequency with which the appear.

•   Dust size: The size of each dust particle.

•   Film fading: The type of film fade effect to apply. The film fade parameter can take one of the following values: None, Sepia tone, Black and White, Faded color film, 1930’s color film.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

General Convolution

HSL Balance

RBG Balance

Sharpen


General Convolution
About Adobe GoLive filter effects

General Convolution

This effect applies a general-purpose convolution effect to a single track. The effect that results is determined by the values entered into the kernel parameters of the effect. The kernel for this convolution is a 3-by-3 matrix of values, consisting of the Cells 1 through 9.

The convolution algorithm examines every pixel of the source, and the eight pixels surrounding it. These values are multiplied by the appropriate values in the cells and summed. This sum is then used as the value of the corresponding destination pixel.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

HSL Balance

RBG Balance

Sharpen


HSL Balance
About Adobe GoLive filter effects

HSL Balance

This filter effect allows you to independently adjust the hue, saturation, and lightness channels of a single track. The HSL balance filter effect has three parameters:

•   Hue: Adjusts the hue channel value of each pixel.

•   Saturation: Adjusts the saturation channel value of each pixel.

•   Lightness: Adjusts the lightness channel value of each pixel.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

RBG Balance

Sharpen


RBG Balance
About Adobe GoLive filter effects

RBG Balance

The RGB balance filter allows you to independently adjust the red, green, and blue channels of a single track. The RGB balance filter has three parameters:

•   Red multiplier: Adjusts the red channel value of each pixel.

•   Green multiplier: Adjusts the green channel value of each pixel.

•   Blue multiplier: Adjusts the blue channel value of each pixel.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

Sharpen


Sharpen
About Adobe GoLive filter effects

Sharpen

This effect applies a convolution sharpen effect. The sharpening that is applied is determined by the convolution kernel. This is a matrix of values that are applied to each pixel of the source track. The sharpen filter effect has two parameters:

•   Amount of sharpening: This pop-up menu gives you a choice of seven values, from 1 (least) to 7 (most). The higher the value, the faster the effect will run and the greater the degree of sharpening

•   Brightness: The default value of 1.0 sharpens the source track but doesn’t change its brightness. Values between 0.0 and 1.0 decrease brightness; values greater than 1.0 increase brightness.

See also:

Alpha Gain

Blur

Color Style

Color Tint

ColorSync

Edge Detection

Emboss

Film Noise

Dust and Film Fading

General Convolution

HSL Balance

RBG Balance


About Adobe GoLive transition effects
Adding effect tracks

About Adobe GoLive transition effects

The following effects are alpha channel based:

See also:

Alpha Compositor

Chroma Key

Cross Fade

Explode

Gradient Wipe

Implode

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Alpha Compositor
About Adobe GoLive transition effects

Alpha Compositor

This effect is used to combine two images using the alpha channels of the images to control the blending. It provides for the standard alpha blending options, and can handle pre-multiplying by any color, although white and black are most common and often run faster. The alpha compositor effect has one parameter:

•   Blend mode: The blend mode parameter can contain one of the following values:

Straight alpha performs a standard alpha blend. The alpha channel value of the first track defines the amount of that track that is included in the composite image, and one minus the alpha channel value of the first track defines the amount of the second track that is included in the composite image.

Pre-multiply alpha calculates the destination pixel based on the color you specify in the Pre-multiply color field.

Reverse alpha performs a reverse alpha blend.

See also:

Chroma Key

Cross Fade

Explode

Gradient Wipe

Implode

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Chroma Key
About Adobe GoLive transition effects

Chroma Key

The chroma key effect combines two tracks by replacing all the pixels of the first track that are the color specified in the Key Color color field with the corresponding pixels of the second track. This allows the second track to “show through” the first in those places where the first track has the specified color:

•   Key Color: The chroma key color to replace in the first track with pixels from the second track.

The following effects are transitions between two tracks:

See also:

Alpha Compositor

Cross Fade

Explode

Gradient Wipe

Implode

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Cross Fade
About Adobe GoLive transition effects

Cross Fade

A “cross fade” or “dissolve” provides a smooth alpha blending between two video sources, which changes over time to give a smooth fade out from the first track into the second. This effect has a single parameter only:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

See also:

Alpha Compositor

Chroma Key

Explode

Gradient Wipe

Implode

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Explode
About Adobe GoLive transition effects

Explode

In an explode effect, track B grows from a single point expanding out until it entirely covers track A. This effect has three parameters:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

•   Explode Center X: The x-coordinate of the explosion center.

•   Explode Center Y: The y-coordinate of the explosion center.

See also:

Alpha Compositor

Chroma Key

Cross Fade

Gradient Wipe

Implode

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Gradient Wipe
About Adobe GoLive transition effects

Gradient Wipe

The Gradient Wipe effect transitions between two tracks, with the change pattern controlled by an input image. At the start of the effect, the area covered by the input image shows the first track, while the area outside the input image shows the second. Over the duration of the effect, the input image is shrunk until only the second track is visible. The gradient wipe effect has two parameters:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

•   Matte: The input image that controls the transition between the two tracks.

See also:

Alpha Compositor

Chroma Key

Cross Fade

Explode

Implode

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Implode
About Adobe GoLive transition effects

Implode

In an implode effect, track A shrinks down to a single point, revealing track B. The center point of the implosion is defined in the effect parameters. The implode effect has three parameters:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

•   Implode center X: The x-coordinate of the implosion center.

•   Implode center Y: The y-coordinate of the implosion center.

See also:

Alpha Compositor

Chroma Key

Cross Fade

Explode

Gradient Wipe

Push

Slide

Iris, Matrix Wipe, Radial, Wipe


Push
About Adobe GoLive transition effects

Push

A push is an effect where one source image replaces another, with both tracks moving at the same time. For example, track A would typically occupy the entire screen, and then track B would slide in from the left, while track A slides out to the right at the same time. The push effect has two parameters:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

•   Push from: Controls the direction from which track B will replace track A. This parameter can contain Top, Right, Bottom, and Left.

See also:

Alpha Compositor

Chroma Key

Cross Fade

Explode

Gradient Wipe

Implode

Slide

Iris, Matrix Wipe, Radial, Wipe


Slide
About Adobe GoLive transition effects

Slide

In a slide effect, track B slides onto the screen to cover track A. At the end of the effect, track B will completely cover track A. The slide effect has two parameters:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

•   Angle: The angle from which track B will enter the frame. This value is expressed in degrees, with 0 degrees defined as the top of the screen.

See also:

Alpha Compositor

Chroma Key

Cross Fade

Explode

Gradient Wipe

Implode

Push

Iris, Matrix Wipe, Radial, Wipe


Iris, Matrix Wipe, Radial, Wipe
About Adobe GoLive transition effects

Iris, Matrix Wipe, Radial, Wipe

Each of these effects is an implementation of a series of masking or “reveal” type effects that take place between two tracks. Each has seven parameters:

•   Percentage: The two slider controls let you manipulate the degree of visibility of either source during the blend.

•   Wipe Type: By setting this parameter, you control which of the 13 available wipes, listed in the Wipe Type pop-up menu, is used. You can preview the wipe types in the preview pane of the Select effects... dialog box.

•   Horizontal repeat: The number of horizontal repeats of the effect that occur in a single track.

•   Vertical repeat: The number of vertical repeats of the effect that are executed in a single track.

•   Border width: The width, in pixels, of a border that is drawn around the second track.

•   Border color: The RGB color of the border around the second track.

•   Soft edges: If the option is selected for this parameter, the border drawn around the second track is blurred.

See also:

Alpha Compositor

Chroma Key

Cross Fade

Explode

Gradient Wipe

Implode

Push

Slide


Using sprite tracks
Editing QuickTime Movies

Using sprite tracks

A sprite track contains graphic objects (referred to as sprites), that can be animated independently. Like a video track, a sprite track consists of a sequence of frames that play back at a certain frame rate. But, unlike a video track which is a continuous stream of pixel images, a sprite track relies on a pool of images (referred to as the “image gallery”) stored with its first keyframe. The advantage is that subsequent frames need not contain the pixel image itself, but simply a reference to an item in the image pool. This makes this kind of movies much smaller in file size than pixel-based video, thus making your animations load faster.

By editing the sprite track, you specify how each sprite moves around the “stage,” that is, the place in the browser window where your QuickTime animation appears. The following sections provide step-by-step instructions for inserting a sprite track and editing its content.

Note: Images you import as sprites will usually default to black rather than transparent. Go to the Sprites tab of the Sprite Track Inspector, and change the setting in the Graphics Mode pop-up menu.

See also:

To insert a sprite track and set properties

Importing graphics

Creating and editing sprites

Using wired sprites

About sprite actions


To insert a sprite track and set properties
Using sprite tracks

To insert a sprite track and set properties:

1  With a movie open in the Movie Viewer, click the Open Track Editor button ( [image]).

2  Drag the Sprite Track icon from the QuickTime tab ( [image]) of the Palette onto the main window area of the Track Editor. This inserts a new sprite track, which appears as a solid bar in the Track Editor.

You can also copy and paste a track from another movie. See Adding video tracks for more information.

3  In the Basic tab of the Sprite Track Inspector, enter a name for the new track in the text box next to the sprite track icon.

4  Set other options in the Basic tab of the Sprite Track Inspector as needed.

•   Left and Top: Use these text boxes to position the track in the movie. Please note that if Left and Top exceed the values specified for Width and Height, respectively, your sprite may be clipped.

•   Width and Height: Use these text boxes to set the vertical and horizontal dimensions of the track.

The other fields are not user-editable. They will be updated as you add sprites to the track and edit their properties.

•   Duration: The duration of the track is determined by the rightmost keyframe you set in the Track Editor.

•   Data Size: This text field displays the data size in bytes.

•   Sprites: This text field tells you how many sprites there are in the current track.

•   Images: This text field shows the number of images in the gallery.

For information on other track properties, see Setting the properties of a video or other visible track.

5  Set options in the Properties tab of the Sprite Track Inspector.

•   Select the Visible option to have the sprite track displayed in the Movie Viewer window (and the movie as such). By deselecting this option, you can temporarily hide the sprite track to view tracks below it.

•   Select the Scale Sprites When Track Is Resized option if your sprites contain vector graphics. This option ensures that your sprites scale smoothly when the sprite track is resized. If this option is not selected, sprites with vector graphics may look jagged after resizing.

•   Select the color field next to the Background Color option to select a background color. Deselecting the color field makes the background white.

See also:

Importing graphics

Creating and editing sprites

Using wired sprites

About sprite actions


Importing graphics
Using sprite tracks

Importing graphics

To use graphics as sprites, you first add them to the gallery. You can use still images with the following formats as sprites: BMP, GIF, JPEG/JFIF, MacPaint, Photoshop, PICT, PNG, QuickDraw GX (Mac OS only, requires the QuickDraw GX extension), QuickTime Image Format, SGI, Targa, and TIFF. By importing graphics, you create an image gallery in the Images tab of the Sprite Track Inspector.

To import images into the gallery:

1  Select the newly created sprite track from the track list in the Track Editor.

2  In the Images tab of the Sprite Track Inspector, click Add. This opens a file selection dialog box. Find and select an image and then click Open to start importing.

3  Select the image compression setting in the Compression Settings dialog box, and then click OK.

•   Select an image compressor from the top pop-up menu. QuickTime comes with numerous built-in image format compressors that cover most of the media formats used on the Internet and for general screen publishing purposes. Your choice of compressor should depend on the type of the image and reasonable movie file size limitations. We recommend that you try the default option first. If this proves unsatisfactory, experiment with other compressors to find the setting that best suits your needs.

•   Select a color depth to use in your movie from the second pop-up menu. The options available depend on the compressor you choose. Most graphics compressors offer choices that just say “Color” (equivalent to 256 colors) and “Grayscale.” The preview pane to the right shows how your color settings affect the image.

•   Drag the Quality slider control to set the quality of the images in your sprite track. As you drag the slider between the Least and Best labels, it shows numerical values from 0 to 100. Image quality and degree of compression are inversely proportional: The higher you set the quality, the lower the compression ratio will be. The preview pane to the right shows how your quality settings affect the image.

4  Adobe GoLive imports the graphic and adds it to the image gallery located in the Images tab of the Sprite Track Inspector.

5  Locate and select the newly imported image in the image gallery list box, and then rename the image in the Image Name text box.

6  Add more images of the same object to create an animated sequence.


Creating and editing sprites
Using sprite tracks

Creating and editing sprites

After you complete your image gallery, you are ready to create sprites and animate them.

To create a sprite:

1  Select the newly created sprite track from the track list in the Track Editor.

2  In the Sprites tab of the Sprite Track Inspector, click Add. Adobe GoLive adds a new sprite to the sprite list at the top of the window.

3  With the new sprite selected rename the sprite in the Name text box.

4  In the Left and Top text boxes, enter values (in pixels) to position the sprite at the beginning of the sprite track.

5  In the Layer text box, enter a numeral to control the front-to-back order of sprites on the same track. The lower the number you enter here, the further to the front the sprite appears.

6  Make sure that the Visible option selected, if you want your sprite to be visible at the beginning of the track.

7  If you have more than one sprite on your track, you may need to use the Graphics Mode pop-up menu to specify how sprites overlay on each other. See Setting the properties of a video or other visible track.

8  In the Initial Image section, choose the first image in the sprite animation from the pop-up menu.

9  In the track list of the Track Editor, click the triangle symbol next to the name of the new sprite track. This expands the view of the track and displays the sprite on a sub-track. You will also notice that a new symbol has appeared on the sprite sub-track. This is a keyframe. A keyframe marks a point in the timeline at which the author wants to change a property of a sprite. When you select a keyframe, you can edit the sprite that it refers to in the Sprite Sample Inspector and change its appearance.

10  Alt-click (Windows) or Option-click (Mac OS) the first keyframe and drag it to the right along the sub-track. When you drop the object, a new keyframe appears.

11  With the keyframe selected, set up the new keyframe in the Sprite Sample Inspector.

The Sprite Sample Inspector lets you make the same settings for a keyframe as the Sprites tab of the Sprite Track Inspector does for the initial appearance of a sprite. You can modify the physical location of the sprite relative to the sprite track using the Left and Top text boxes (thus creating the visual impression of motion), change the layering of sprites using the Layer text box, control visibility using the Visible option, and make the sprite opaque or transparent with the Graphics Mode options. Most importantly, the Sprite Sample Inspector features a pop-up menu and a preview pane to let you select an image from the gallery. This image appears at the point of the animation determined by the new keyframe you have inserted in step 10 above.

For detailed instructions on using these options, see Using sprite tracks.

12  Add more keyframes and tweak their appearance in the Sprite Sample Inspector.

13  Click the Play button ( [image]) in the Track Editor to preview the animation in the Movie Viewer window.


Using wired sprites
Using sprite tracks

Using wired sprites

Wired sprites let you add true interactivity to your QuickTime movies, allowing them to respond to events caused by viewers of your page. Tracks with wired sprites can be used as stand-alone animations or overlaid on other types of tracks to provide custom controls. They play back in any Web browser that has the Quick Time 2.0 or later plug-in installed. For example, you can make sprite buttons and wire them so that they jump to specific URLs, start or stop the movie, or set the audio volume when pressed.

When you wire a sprite, you insert keyframes and attach actions to them.

To wire a sprite with an action:

1  Locate the desired sprite on the sprite track and click the keyframe with which you want to launch the action. If you need a new keyframe, Alt-click (Windows) or Option-click (Mac OS) any existing keyframe and drag to the desired location on the sprite track to insert one.

2  In the Sprite Sample Inspector, click the Actions tab to display the tools for wiring sprites.

3  Select an event from the Events list to determine what the viewer should do to trigger a sprite action:

•   Click triggers an action when the user presses the mouse button (without releasing it) while the pointer is on top of a sprite.

•   Click End triggers an action when the user releases the mouse button while the pointer is on top of a sprite.

•   Click Button triggers an action upon a single mouse click on a sprite that acts as a button.

•   Mouse Enter triggers an action when the mouse pointer is moved over a sprite.

•   Mouse Exit triggers an action when the mouse pointer is moved away from a sprite.

4  Click the “+” button to attach an action to the event.

5  In the Action Kind menu, choose an action—for example, Movie GoTo Beginning. After you have made your choice, a brief description of the action appears below the pop-up menu. For a complete list of sprite actions, see About sprite actions.

You can wire the sprite with additional actions. For example, you can combine any of the mouse-click events with one of the two mouse-over events to make the sprite respond not only when being clicked but also when the visitor moves the mouse pointer over it.

Active events are identified by dot symbols (“•”) that appear at the right edge of the Events list.

6  Click the Play button ( [image]) in the Track Editor to preview the animation in the Movie Viewer window.

Adobe GoLive comes with a complete set of ready-to-use sprite actions for QuickTime movies. These actions can be attached to single keyframes in a sprite track.


About sprite actions
Using sprite tracks

About sprite actions

Adobe GoLive includes sprite actions for controlling a movie.

Movie Set Volume Sets the audio volume of the movie. This menu option displays a text box that lets you enter a level between 0 (minimum) and 255 (maximum).

Movie Set Rate Sets the movie’s playback speed. This menu option displays a text box that lets you enter any of the following values (decimals or whole numbers allowed). Enter 1 to playback at normal speed, 2 to playback at double speed, 0 to stop, -1, -2, etc. to play backwards.

Movie Set Looping Flags Sets the looping mode for movie playback. This menu option displays a pop-up menu that lets you choose: None to play from beginning to end, then stop; Loop to play from beginning to end, then resume playback at the beginning; Loop and palindrome to play from beginning to end, then backwards until reaching the beginning, from which point on it will play forward again.

Movie GoTo Time Jumps to a user-specified time in the movie. This menu option displays a text box with up and down arrows that let you adjust the desired time. The maximum value is given by the movie’s duration.

Movie GoTo Beginning Jumps to the beginning of the movie.

Movie GoTo End Jumps to the end of the movie.

Movie Step Forward: Advances the movie in the same fashion as the Step Forward button in the Movie Viewer window.

Movie Step Backward Rewinds the movie in the same fashion as the Step Backward button in the Movie Viewer window.

Movie Set Selection Selects part of the movie, based on a user specified time range. This menu option displays two Start Time and End Time text boxes with up and down arrows that let you adjust the limits of the time range. It also adds an Apply button.

Movie Set Play Selection Plays only the current movie selection specified by a Movie Set Selection action. This menu option displays a check box that toggles Movie Play Selection on and off.

Track Set Enabled Enables or disables a track, regardless of its type. You can use it, for example, to switch between two different sound tracks.

The following actions enable you to control a sprite’s spatial properties:

Sprite Set Matrix Sets the sprite’s matrix, letting you move it. This menu option displays a pop-up menu that lets you choose from a selection of known sprites as well as two Top and Left text boxes that let you specify the sprite’s initial position.

Sprite Set Image Index Selects a certain image from the image gallery of the sprite track. This action is useful for creating mouseover effects. This option displays image selection tools in the Inspector, including the preview pane as well as the pop-up menu known from the Sprite Track Inspector (see Creating and editing sprites) and Sprite Sample Inspector (see Using wired sprites).

Sprite Set Visible Shows or hides the current sprite. This menu option displays a pop-up menu that lets you choose from a selection of known sprites as well as a Visible check box that shows and hides the sprite.

Sprite Set Layer Sets the current sprite’s layer number, specifying its front-to-back order relative to other sprites on the same track. This menu option displays a pop-up menu that lets you choose from a selection of known sprites as well as a text box that accepts the layer number. The lower the layer number you enter, the farther to the front the sprite appears. The number 32767 indicates that this is a background sprite.

The following action is global; that is, it doesn’t control the movie playback window:

•   GoTo URL: If the movie is playing back through the QuickTime browser plug-in, this causes the browser to jump to the specified URL. This menu option displays Adobe GoLive’s typical link selection options, including the URL text box, the Browse… button, and the Point-and-Shoot button that lets you link to a page or an URL in the site window.

If required by the structure of your site, you can enable the Absolute check box to convert the path to the referenced object to an absolute path. This option is discussed in Setting up absolute paths.


Using Sound and Music Tracks
Editing QuickTime Movies

 Using Sound and Music Tracks

You import sounds in various formats, including AIFF/AIFC, System 7 Sound, WAV, and Sound Designer II, as well as standard MIDI files. Any sound or music track you import creates a track in the Track Editor.

To insert a sound or music track:

1  With a movie open in the Movie Viewer, click the Open Track Editor button ( [image]).

2  Drag the Sound Track or Music Track icon from the QuickTime tab ( [image]) of the Palette onto the main window area of the Track Editor.

A. Sound Track item B. Music Track item

3  Select a sound (AIFF, AIFC, System 7 Sound, WAV, or Sound Designer II) or music file (standard MIDI) and click Open to import it.

4  In the Sound Track Inspector or Music Track Inspector, enter a new name for the track in the text box next to the Sound Track or Music Track icon.

5  Click the Play button ( [image]) in the Track Editor to listen to the track and see how it fits in with other tracks.

The Sound Track Inspector and the Music Track Inspector display the basic properties of the sound or MIDI file that you import.

Start Time displays the start time of the track, which is usually “time zero.” You change the start time of a track by clicking its bar in the Track Editor and dragging it in the desired direction.

Duration The duration of the track. This property is not editable for sound or music tracks.

Track Type Shows the track type, Sound or Music.

Data Size Displays the data size in bytes.

Data Rate Indicates the amount of data available to be played every second.

Sample Rate Shows the sampling rate of the sound track, for example 11.025 kHz for mono or 21.5 kHz for stereo (not applicable to music tracks).

Channels Tells you whether the sound track contains stereo or monaural audio (not applicable to music tracks).

Sample Size Shows whether the sound track contains 8-bit or 16-bit audio (not applicable to music tracks).

Compression Displays the compressor used on the audio (not applicable to music tracks).

For more information on using sound and music tracks, visit the Web site at www.adobe.com/supportservice/custsupport/SOLUTIONS/18136.htm.


Using an HREF track
Editing QuickTime Movies

 Using an HREF track

An HREF track (which can’t be renamed) is used to embed URLs on an additional text track in a QuickTime movie. A Web browser jumps to a URL destination on the Web—either automatically or when the viewer clicks the movie display area. The track you add creates a segment of specified length during which the URL appears in the movie.

This feature is best used in a page with HTML frames, where the movie plays back in one frame and a second frame is used to display the alternative URLs addressed during movie playback. Using frames allows the movie to play back continuously, while the content of the second frame is being swapped. Content swapping can be achieved either interactively by a mouse click or automatically by setting the appropriate option for the movie. You can use only one HREF track per movie.

To insert an HREF track:

1  With a movie open in the Movie Viewer, click the Open Track Editor button ( [image]).

2  Create a page with a frameset, for example with two vertical frames named LEFT and RIGHT.

3  Place a Plug-in placeholder from the Basic tab of the Palette on any of the two pages–for example, on the page that appears in the frame LEFT– and reference a QuickTime movie using Point and Shoot or any other of the standard methods supported by Adobe GoLive.

4  Double-click the QuickTime movie in the document window to open the movie in the Movie Viewer.

5  In the Movie Viewer window, click the Open Track Editor button ( [image]).

6  Drag the HREF Track item from the QuickTime tab ( [image]) of the Palette onto the main window area of the Track Editor. This inserts a new empty track named HREF Track.

7  In the Basic tab of the HREF Track Inspector, enter a name for the track in the text box next to the HREF Track icon.

8  Set the HREF track properties.

•   Left and Top: Position the track in the movie. Because the HREF track is visible as a black bar with white text in the movie, we recommend placing it at the bottom or the top. To find the bottom of the movie, click the video track and look at its Height dimension in the General tab of the Video Track Inspector. The height of the track determines its bottom dimension. If the height is, for example, 160 pixels, enter the same value in the Top text box for the HREF track to position it below the video track. Entering 0 places the HREF track at the top of the track.

•   Duration: The duration of the track. You can change the length of an HREF track by adding URLs and positioning them along the timeline of the movie.

•   Track Type: Shows Text. An HREF track is a type of text track.

For information on other track properties, see Setting the properties of a video or other visible track.

9  Click the small triangle control next to the track name in the Track Editor to expand the HREF track.

10  Make sure the track is selected, and then in the HREF tab of the HREF Track Inspector, enter a URL in the Link text box. Or click Browse and navigate to a page or click the Point-and-Shoot button and drag to a file or URL in the site window.

If required by the structure of your site, you can select the Absolute check box to convert the path to a referenced object to an absolute path (not required for URLs that point at other locations on the Web). See Setting up absolute paths.

11  Enter the name of the frame where the referenced page should appear in the Target text box.

12  Click Add on the HREF tab to insert the first segment. The first segment is as long as the movie itself. (If there is no other media in the movie, then the duration defaults to one second.) A new segment appears below the bar of the HREF track in the main window area of the Track Editor.

13  To add the next segment, position the time cursor by clicking the up and down arrows next to the Start option in the HREF tab of the HREF Track Inspector.

14  Click Add to insert another segment on the HREF track, and then add more tracks as needed.

15  You can click the last segment and set its duration using the up and down arrows next to the Duration option. (The durations of the preceding segments can’t be changed.)

16  Choose File > Save to save the changes to the QuickTime movie.

17  Return to the document window and preview the track in a browser.


Using a chapter track
Editing QuickTime Movies

Using a chapter track

Like the chapters of a book, a chapter track subdivides a movie in segments that deal with the same topic. It provides basic navigation support for QuickTime movies, allowing viewers of your page to get quickly to selected points in a movie. When viewed in a Web browser, the QuickTime plug-in displays the chapter track as a pop-up menu in the standard controller of the movie. You can use only one chapter track per movie.

To insert a chapter track:

1  With a movie open in the Movie Viewer, click the Open Track Editor button ( [image]).

2  Drag the Chapter Track icon from the QuickTime tab ( [image]) of the Palette onto the main window area of the Track Editor.

3  In the Basic tab of the Chapter Track Inspector, enter a track name in the text box next to the Chapter Track icon, and then set other track properties. See Setting the properties of a video or other visible track for more information.

The width of a Chapter track must be at least 275 pixels, otherwise the navigation pop-up menu will not be visible.

4  In the Track Editor, click the small triangle control next to the track name to expand the track.

5  Make sure the track is selected in the Track Editor, and then in the Chapter tab of the Chapter Track Inspector, click New to insert a new chapter. The first segment is as long as the movie itself. (If there is no other media in the movie, then the duration defaults to one second.)

6  In the Chapter text box enter a name for the chapter. As you type, notice that the chapter name appears in the controls section of the Movie Viewer window.

7  Use the up and down arrows next to the Start option to go to the point in the movie where you want the next chapter to begin. The time cursor in the Track Editor and the movie in the Movie Viewer window move along to let you see the current position in the movie.

8  Click New to insert the next chapter, and then name it and set its start time.

9  You can click the last chapter and set its duration using the up and down arrows next to the Duration option. The durations of the preceding chapters can’t be changed.

10  In the Movie Viewer window, check your choices by choosing chapters from the chapter list. (You may have to resize the window to see the pop-up menu.)


Using text tracks
Editing QuickTime Movies

Using text tracks

Text tracks display text within a movie—for example, to subtitle a movie. You can subdivide text tracks into segments and display different text messages in a movie.

A movie with a text track

To insert a text track:

1  With a movie open in the Movie Viewer, click the Open Track Editor button ( [image]).

2   Drag the Text Track icon from the QuickTime tab ( [image]) of the Palette onto the main window area of the Track Editor.

3  In the Basic tab of the Text Track Inspector, enter a track name in the text box next to the Text Track icon, and then set other track properties. See Setting the properties of a video or other visible track for more information.

4  In the Track Editor, click the small triangle control next to the track name to expand the text track.

5  Make sure the track is selected in the Track Editor, and then in the Text tab of the Text Track Inspector, type the desired text in the Text text box.

6  Click New to insert the first text segment. The segment is listed at the top of the window. The first text segment will always start at the beginning of the timeline and will last as long as the longest track in the movie.

7  Set the time that you want the text to appear in the movie using the up and down arrows next to the Duration option.

8  To add the next text segment to the track, position the time cursor by clicking the up and down arrows next to the Start option in the Text tab; then repeat steps 3 through 5.

9  You can click the last segment in the list and set its duration using the Duration option. The durations of preceding segments can’t be changed.


Creating Forms

A form is a Web page that allows viewers to send information to the Web server. To use forms, your Web server must have a Common Gateway Interface (CGI) application installed to manage the flow of information from viewers back to the content provider. If you are not familiar with CGI scripting, ask your webmaster for help or for existing scripts that you can modify to meet your needs.

Adobe GoLive provides a complete inventory of forms elements (HTML tags) ready for easy drag-and-drop insertion from the Forms tab ( [image]) of the Palette. All forms elements fully support the HTML 4.0 standard, including labels, navigation using tabbing, access keys, and structuring through field sets and legends. All are also backward compatible with the HTML 3.2 specification.

Form in Preview

See also:

Setting up forms

Adding form elements

Adding HTML 4.0 forms tags and features


Setting up forms
Creating Forms

Setting up forms

Adobe GoLive lets you build forms visually in the Layout view of the document window by dragging icons (HTML tags) from the Forms tab of the Palette. As you build your form visually, you can check the source HTML code by switching to the HTML Source Editor (Source view) or the HTML Outline Editor.

See also:

Using tables to lay out forms

Setting up the Form and EndForm tags


Using tables to lay out forms
Setting up forms

Using tables to lay out forms

Different browsers and different platforms display forms elements differently, in appearance and size. No Web authoring tool guarantees that fill-in forms you design for the Web will look the same across platforms. With Adobe GoLive, however, you can get predictable results if you place forms elements in HTML tables, rather than on layout grids or a in simple flow of HTML. If you decide to use a layout grid, because some browsers display forms as much as 50% larger, be careful not to group your elements too tightly. If you use HTML tables, increase the height of the rows and width of the cells and preview your forms frequently on all targeted browsers. See Creating tables and Creating text for more information.

To build a form on your Web page, you drag icons from the Palette to create the necessary form elements, such as text boxes, check boxes, radio buttons, and pop-up menus. You set the properties of the form elements in the Inspector.

The beginning Forms tag must precede any form elements. Without the starting Form tag, the form page won’t render at all. For further information see Setting up the Form and EndForm tags.

To add form elements:

1  Drag the appropriate icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  With the placeholder selected in the document window, set up the form element in the Inspector. For information on setting up specific form elements, see the description of that form element.

A. Put the Form tag before all elements of a fill-in form. B. Individual forms elements can be dragged into table cells.


Setting up the Form and EndForm tags
Setting up forms

Setting up the Form and EndForm tags

The Form and EndForm tags identify the current Web page or section of a Web page as a form and instruct the browser where and how to return form information for processing. These two tags must bracket the content of your form; they must be the first and last tags, respectively. If you are using an HTML table to design your form, put the Form tag immediately before the table and the EndForm tag immediately after the table.

To set up Form tags:

1  Drag the Form icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Select the Form placeholder in the document window, and set up the Form tag in the Inspector.

3  Type a unique name for your form in the Name text box. Naming the form is especially important if you have more than one form on your page. CGI scripting is also easier if each form on your site is identified by a unique name.

4  In the Action text box, type the directory and file name of the CGI script where the information will be sent when the visitor clicks the Submit button. Alternatively, click Browse button and select a destination, or drag from the Point and Shoot button ( [image]) to link to a CGI script in the site window. Internet Explorer has problems using the mailto: tag, so we don’t recommend that the CGI action include an e-mail address for sending the information. Due to this browser issue, we recommend using CGI scripts only to process forms.

5  Select a target location in the destination URL from the Target pop-up menu. The frameset page has to be open for the Target menu to be active.

If your form is embedded in a frame set and you want to control where the HTML page returned by the CGI appears, choose a target location from the Target pop-up menu. In addition to the names you have given to individual frames within a frame set, you can set the following options:

•   _blank loads the page into a new unnamed window.

•   _self loads the page into the window or frame that previously held the form.

•   _parent loads the page into the parent frame set of the form.

•   _top loads the page into the full browser window, replacing any current frame sets.

6  Select an encryption method from the Encrypt pop-up menu. Encryption is only used for secure sites utilizing special encryption software. This feature is rarely, if ever, used. Ask your ISP webmaster for more information, such as the appropriate encryption method.

7  In the Method pop-up menu, determine how the form information will be sent:

•   Post returns data entered by the visitor information separately from the Web page.

•   Get appends the viewer’s entries to the file specified by the URL in the Action text box.

•   Default omits the Method attribute.

Note: It is recommended that you use the Post option. Appending information to the destination file may exceed the URL length limit and possibly cause data loss.


Adding form elements
Creating Forms

Adding form elements

Form elements are HTML tags. The Forms tab in the Adobe GoLive Palette contains a complete inventory of form elements including buttons, checkboxes, text fields, list boxes, pop-up menus, special tags and HTML 4.0 tags.

See also:

Setting up buttons and check boxes

Setting up text fields

Setting up list boxes and pop-up menus

Setting up special HTML tags


Setting up buttons and check boxes
Adding form elements

Setting up buttons and check boxes

You can set up several types of buttons, radio buttons, and check boxes on your Web page form.

•   The Submit Button, labeled Submit Query, sends data entered in the form to the CGI script for processing.

•   The Reset Button, labeled Reset, clears the current data, resetting the form to its default values.

For information on buttons that accept HTML in the label area, see Using universal buttons.

•   The Radio Button lets viewers select one item from a list. To make sure that the selection works properly, create logical groups of complementary radio buttons in the Form Radio Button Inspector.

•   The Check Box lets the user select multiple items from a list.

See also:

To set up a Submit, Reset, or Custom button

To set up a Radio Button

To set up a check box


To set up a Submit, Reset, or Custom button
Setting up buttons and check boxes

To set up a Submit, Reset, or Custom button:

1  Drag the Submit Button or Reset Button icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

A. Submit Button icon B. Reset Button icon

2  You can change a submit or reset button using the Button pop-up menu.

3  For a custom button, set the Button pop-up to normal and type a unique name in the Name text box. Do not use Submit or Reset; these names are reserved.

4  Select Label, and type in the button label you want viewers to see—for example, if you type Send, your viewers will see Send instead of Submit. The label is updated immediately on-screen.

See also:

To set up a Radio Button

To set up a check box


To set up a Radio Button
Setting up buttons and check boxes

To set up a Radio Button:

1  Drag the Radio Button icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Select the placeholder in the document window, and set the options in the Form Radio Button Inspector.

3  In the Group text box, type in a new logical group name, or select an existing group name from the pop-up menu.

4  In the Value text box, type in a value or a descriptive name for the radio button that will identify it within the group. When a visitor clicks the Submit button in the form, this value will be passed to the CGI script.

5  In the Focus section, the Selected checkbox will select the radio button by default.

6  From the Forms tab of the palette, drag a label icon next to each button, and enter your text. Repeat steps 1 through 6 for each button in the group.

See also:

To set up a Submit, Reset, or Custom button

To set up a check box


To set up a check box
Setting up buttons and check boxes

To set up a check box:

1  Drag the Check Box icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Select the placeholder in the document window, and set the options in the Form Check Box Inspector.

3  In the Name text box, type in a unique name to identify the check box.

4  In the Value text box, type in a descriptive name for the check box. When a visitor clicks the Submit button in the form, this value will be passed to the CGI script to indicate the selection of this option.

5  In the Focus section, the Selected checkbox will select the radio button by default.

See also:

To set up a Submit, Reset, or Custom button

To set up a Radio Button


Setting up text fields
Adding form elements

Setting up text fields

You can set up text fields, password fields, and text areas on your Web page form.The Text Field and Password icons insert a single-line text field that lets viewers enter text, such as their names or other personal data, or a hidden password respectively. The Text Area icon inserts a text field that lets viewers enter multiple lines of text. When a viewer clicks the Submit button this text will be passed to the CGI script.

See also:

To set up a text field or a password field

To set up a text area


To set up a text field or a password field
Setting up text fields

To set up a text field or a password field:

1  Drag the Text Field or Password icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

A. Text Field icon B. Password icon

2  Select the placeholder in the document window, and set the options in Form Text Field Inspector or the Form Password Inspector.

3  In the Name text box, type in a unique name to identify the text field or password field.

4  In the Value (Windows) or Content (Mac OS) text box, type in default text that can be overwritten by viewers, or leave the text box empty.

Note: Password protection of Web pages is an interactive feature that requires processing of user entries through a CGI script on the Web server. What you implement in Adobe GoLive is the visual representation of the password protection mechanism.

5  In the Visible text box, type in the number of visible characters that viewers will be able to see. This determines the width of the text box.

6  In the Max text box, type in the maximum number of characters accepted by the text box before truncation occurs. The default is to leave it empty. If empty, this limit is determined by the Web browser used to view the form.

7  Select Is Password Field if the text box is a password text box. If selected, Adobe GoLive will display bullets rather than text as the viewers type.

See also:

To set up a text area


To set up a text area
Setting up text fields

To set up a text area:

1  Drag the Text Area icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Select the placeholder in the document window, and set the options in the Form Text Area Inspector.

3  In the Name text box, type in a unique name to identify the text area.

4  In the Rows text box, type in the number of rows to determine the maximum height of the text box.

5  In the Columns text box, type in the number of characters to determine the width of the visible text area.

6  Choose the appropriate option from the Visible (Windows) or Wrap (Mac OS) pop-up menu to control line breaks:

•   Default uses the default text area settings of the browser.

•   Off instructs the browser to ignore the Columns limit and prevents text entered into the text area from wrapping at the right margin of the box.

•   Virtual and Physical instruct the browser to respect the Columns limit. The entered text wraps when it reaches the right margin of the box and starts scrolling vertically.

7  If desired in the Data text box, type in default text that the user can overwrite (optional).

See also:

To set up a text field or a password field


Setting up list boxes and pop-up menus
Adding form elements

Setting up list boxes and pop-up menus

The List Box icon inserts a scrolling list box with multiple options to choose from. The Popup icon inserts a pop-up menu with multiple options to choose from.

To set up a list box or a pop-up menu:

1  Drag the List Box or Popup icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

A. List Box icon B. Popup icon as itappears in Windows and Mac OS

2  Select the placeholder in the document window, and set the options in the Form Listbox Inspector or the Form Popup Inspector.

3  In the Name text box, type in a unique name to identify the list box or pop-up menu.

4  In the Rows text box, type in the number of rows you want to be visible. For a pop-up menu, this is the number of rows viewers see when scrolling through the menu.

5  Select Multiple Selection to allow viewers to select one or more options.

6  For each of the “First,” “Second,” and “Third” default items in the Data list box, edit their labels and the values they return to the CGI script.

For example, you can set up the list box so that the CGI receives a Mail_info_on biking message string when viewers select the Bicycles item and submit the form.

7  Select an option from the label/value list box. Check the box next to the Label and Value text boxes to have the browser display that option as the default selection.

8  Edit the options:

•   Click Duplicate to duplicate the currently selected option for editing.

•   Click New to add a new option. Enter a label and value in the Label and Value text boxes, respectively.


Setting up special HTML tags
Adding form elements

Setting up special HTML tags

A number of special HTML tags let you add images to your form buttons, insert hidden data, include cryptographic keys, and interactive file browsers.

•   The Input Image icon inserts an image, such as a graphical Submit button. Inserting graphics can help viewers navigate through your pages.

•   The Hidden icon inserts an HTML tag that does not display in the browser but whose values are submitted with the form. This tag is used to send additional information in browser-server exchanges.

•   The Key Generator icon lets viewers address an encryption algorithm for safeguarding transactions with your Web site. For more information on cryptographic issues associated with forms, contact your ISP’s webmaster.

•   The File Browser icon inserts a file selection dialog box, but is rarely used.

To insert an input image placeholder:

1  Drag the Input Image icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Select the placeholder in the document window, and set the options in the Form Image Inspector.

3  Link the image placeholder with a graphic using Point and Shoot (see Adding images), drag and drop (see Importing and previewing images with drag-and-drop), or the Browse button (see Additional image options) of the Image Inspector.

4  In the Spec. tab of the Form Image Inspector, set up the input image. Two items are important for inputting images:

•   Do not deselect Is Form, if you plan to use the image as a clickable button. Is Form is selected by default when you insert an Input Image item.

•   Be sure to enter a name in the Name text box to identify the input image as a unique item. This is especially important if you are using several graphical submit buttons within the same form. The text you enter in the Name text box is appended to the x and y coordinates sent to the CGI script to indicate that viewers have clicked a specific input image on the page, and to trigger a button-specific action.

To set up a hidden tag, key generator, or file browser:

1  Drag the Hidden, Key Generator, or File Browser icon from the Forms tab ( [image]) of the Palette to your page, or double-click the icon in the Palette.

A. Hidden icon B. Key Generator icon C. File Browser icon

2  Select the placeholder in the document window. In the Inspector, name the tag:

•   For a Hidden tag or a Key Generator tag, type a unique name in the Name text box. For a File Browser type in the name and directory path of the file browser CGI program residing on the Web server.

3  Enter a value:

•   For a Hidden tag, type a default value in the Value text box.

•   For a Key Generator tag, type the security level in the Challenge text box.

•   For a File Browser, in the Visible text box, type a numerical value to determine the width of the file browser window.


Adding HTML 4.0 forms tags and features
Creating Forms

Adding HTML 4.0 forms tags and features

The HTML 4.0 standard introduces several new features that let Web authors focus on individual forms elements, display temporarily disabled items, and set items to read-only status. Several new icons have been added to the Forms tab of the Palette:

•   A universal button with an editable label area that accepts text and HTML tags.

•   Automatic labels for check boxes, radio buttons, and other forms elements that do not visually indicate their purpose.

•   Field sets with legends for the visual grouping of forms elements of the same type.

See also:

Providing form navigation support

Setting up tabbing chains

Defining an access key

Setting up read-only forms elements

Setting up inactive form elements

Using universal buttons

Adding labels

Grouping form elements


Providing form navigation support
Adding HTML 4.0 forms tags and features

Providing form navigation support

With HTML 4.0, Web authors can make their forms navigable using keyboard shortcuts. In Adobe GoLive, these attributes are implemented as checkbox options that appear in the Focus section of the different Inspectors.

In an HTML form, each element must receive focus from the user to become active and perform its task. In earlier versions of HTML, this was usually done by clicking the desired element. HTML 4.0 introduces two alternative ways of navigating a form using the keyboard:

•   Viewers can follow a predefined tabbing chain, and then type in text or press Enter to trigger some form-specific action.

•   Viewers can select individual elements by pressing a platform-specific key combination, and then type in text or press Enter to trigger some form-specific action.

Note: At this time, only the Windows version of Microsoft Internet Explorer 4.0 supports form navigation control keys.


Setting up tabbing chains
Adding HTML 4.0 forms tags and features

Setting up tabbing chains

Adobe GoLive lets you define a tabbing chain for any given set of forms elements on the same page. The tabbing chain specifies the order in which form elements are selected when viewers press the Tab key repeatedly.

A tabbing chain is defined by assigning a tab index value to each element. Navigation proceeds from the element with the lowest index value to the element with the highest index value. Tab index values need not be contiguous or start at any particular value. If you assign the same tab index value to two elements, the sequence in the HTML stream determines the tabbing order. Labels, text fields, password fields, text areas, Submit buttons, Reset buttons, checkboxes, radio buttons, pop-up menus, and list boxes support tab indexing.

See also:

To assign a tab index value to form elements automatically

To assign a tab index value to form elements manually

To change an existing tabbing chain


To assign a tab index value to form elements automatically
Setting up tabbing chains

To assign a tab index value to form elements automatically:

1  In Layout view, choose Special > Start Tabulator Indexing. Alternatively, select the first element, and click the Start/Stop indexing button ( [image]) in the Inspector.

Small yellow index boxes appear on top of or inside indexable elements throughout your form, and a pound sign is appended to the pointer ( [image]).

2  Click each element successively in the required tabbing order. A number appears in each index box and in the Tab text box of the respective Inspector. This is the tab index.

3  When you have specified the tabbing chain, choose Special > Stop Tabulator Indexing, or click the Start/Stop indexing button ( [image]) in the Inspector.

4  Test the result in a browser that supports tabbing navigation, such as Microsoft Internet Explorer 4.0 on a Windows platform.

See also:

To assign a tab index value to form elements manually

To change an existing tabbing chain


To assign a tab index value to form elements manually
Setting up tabbing chains

To assign a tab index value to form elements manually:

Select the forms elements one at a time in the desired tabbing order, and enter a number in the Tab text box of the Inspector.

See also:

To assign a tab index value to form elements automatically

To change an existing tabbing chain


To change an existing tabbing chain
Setting up tabbing chains

To change an existing tabbing chain:

1  Select the element where you want to start renumbering.

2  Choose Special > Start Tabulator Indexing, or click the Start/Stop Indexing button ( [image]) in the Inspector.

3  Click each element successively in the new required tabbing order.

4  Choose Special > Stop Tabulator Indexing, or click the Start/Stop Indexing button ( [image]) in the Inspector.

5  Test the result in a browser that supports tabbing navigation, such as Microsoft Internet Explorer 4.0 on a Windows platform.

See also:

To assign a tab index value to form elements automatically

To assign a tab index value to form elements manually


Defining an access key
Adding HTML 4.0 forms tags and features

Defining an access key

Adobe GoLive lets you define a unique access key for any forms element on a page. An access key lets viewers focus on an element by pressing a modifier key and a dedicated alphanumeric key (Alt-S, for example, to activate the Submit button in a Microsoft Windows-based browser).

Legends, labels, text fields, password fields, text areas, Submit buttons, Reset buttons, checkboxes, and radio buttons support access keys.

To define an access key:

1  Select the element you want to assign a key combination to.

2  In the Key text box of the Inspector, type any alphanumeric character, and then press Enter.

3  Add a visual indication of an access key—for example, add a label or text that gives the key combination.

4  Repeat steps 1 through 3 for the next forms element. Do not assign the same access key to two forms elements.

5  Test the result in a browser that supports navigation via access keys, such as, Microsoft Internet Explorer 4.0 on a Windows platform.


Setting up read-only forms elements
Adding HTML 4.0 forms tags and features

Setting up read-only forms elements

HTML 4.0 lets Web authors set individual HTML form elements to read-only status. For example, you might want to include text that must accompany the form. Text fields, password fields, and text areas support read-only status.

To set an element to read-only status:

Select the element you want to set to read-only, and select Readonly in the Inspector.


Setting up inactive form elements
Adding HTML 4.0 forms tags and features

Setting up inactive form elements

To give viewers access to form elements only in specific situations, HTML 4.0 lets you build HTML forms with dimmed elements that can be conditionally activated by a script. On the HTML side, you add a “disabled” attribute to each form element that should be unavailable when the viewer loads the form. On the scripting side, the program monitors elements of another form for a particular event, and activates the item when the condition is met. For example, this feature lets you to keep a form’s Submit button inactive until viewers enter some required data.

Legends, labels, text fields, password fields, text areas, Submit buttons, Reset buttons, check boxes, and radio buttons support the inactive status.

To disable an element:

1  In the document window, select the element you want to deactivate.

2  Select Disabled in the Inspector window.

3  Write the script to implement the logic that dynamically enables the item, and attach the script to the page or to another button.


Using universal buttons
Adding HTML 4.0 forms tags and features

Using universal buttons

In forms designed for HTML 4.0 compatible browsers, the Button icon inserts a universal clickable button that carries an editable label. This button behaves exactly like a standard Reset, Submit, or Normal button, but because the label area accepts HTML, you can customize its appearance. You can insert formatted or unformatted text, an image, or other content to make the user interface of your form more intuitive.

To insert a button:

1  Drag the Button icon from the Forms tab ( [image]) of the Palette to your page, or double-click the icon in the Palette.

2  Double-click the Button text in the button placeholder, enter a description of your choice (for example, Send), or insert an image placeholder and link it with a button image.

3  Set up the button in the Form Button Inspector.

•   In the Name text box, give a unique name to the button.

•   In the Value text box, specify an action or a value to be passed to the CGI script.


Adding labels
Adding HTML 4.0 forms tags and features

Adding labels

In forms designed for HTML 4.0 compatible browsers, the Label icon inserts a visual label that you can use to identify the purpose of a checkbox, radio button, text field, or menu to viewers. The Label icon has a major advantage over the previously used HTML text labels. Clicking the label now activates or deactivates the associated object—for example, a checkbox.

To insert a label:

1  Drag the Label icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Double-click the content area of the label to select it, and then type the label name.

3  Double-click the name in the content area again, and assign a style such as bold, if desired.

4  To link the label with the checkbox do one of the following:

•   Click the Point and Shoot button ( [image]) in the Form Label Inspector. Drag to the forms element you want to label.

•   Alt-click (Windows) or Command-click (Mac OS) the border of the label, and drag to the forms element you want to label.

The Reference text box of the Form Label Inspector displays the ID which controls the association between the checkbox and its label.

Linking a label: A. Using Point and Shoot B. Using Alt-click (Windows) or Command-click (Mac OS).

5  Each time you link a label to a form element, click Show to check the association. This button is particularly useful if your page contains multiple pairs of label-form elements.


Grouping form elements
Adding HTML 4.0 forms tags and features

Grouping form elements

In forms designed for HTML 4.0 compatible browsers, the Field Set icon inserts a bounding box that visually groups forms elements. You can use the legend to tell visitors the purpose of the options grouped in the field set.

Note: This does not render in Netscape, and Internet Explorer has problems if this is used on a layout grid.

To insert a Field Set and Legend:

1  Drag the Field Set icon from the Forms tab ( [image]) of the Palette to your table cell, or double-click the icon in the Palette.

2  Set up the field set in the Form Fieldset Inspector:

3  Deselect Use Legend if you do not want a textual description to appear within the bounding box of the field set.

4  Choose an alignment option for the legend from the Alignment pop-up menu:

•   Default positions the legend according to the browser’s preferences. (If the browser does not specify any legend alignment preferences, which is the case with all current browser versions, the legend will be left-aligned.)

•   Left positions the legend in the upper left corner of the field set.

•   Center positions the legend in the upper middle of the field set.

•   Right places the legend in the upper right corner of the field set.

5  Double-click the name in the field set, and then type in the name of your choice.

6  Drag an HTML table into the field set, and add several check boxes, radio buttons, or other forms elements to the table cells.


Working in HTML

An introduction to HTML

Editing HTML code in Outline view

Editing HTML code in Source view

Adding unknown start and end tags

Using text macros with source code editors


An introduction to HTML
Working in HTML

An introduction to HTML

Adobe GoLive doesn’t require in-depth knowledge of HTML, but a basic understanding of the language will help you understand the capabilities and limitations of Web design and publishing.

You don’t need a special web-authoring tool to create an HTML page. You can use any program that can save in text-only format, including Simple Text and Notepad. The formatting instructions are written using markup instructions enclosed in angle brackets. These markup instructions are referred to as tags. Tags instruct the browser how to display text, but the tags are hidden when the text is displayed.

All HTML files use a basic structure:

<HTML>

<HEAD>

<TITLE>This title appears in the title bar of the browser window.</TITLE>

</HEAD>

<BODY>

This section contains text with markup.

</BODY>

</HTML>

This basic structure tells the browser that it is receiving an HTML page, subdivided into a header <HEAD> and a body <BODY> section. Except for the text enclosed in the <TITLE>… </TITLE> section, which appears in the title bar of the browser, the content of the header section is invisible. The text in the body section is the visible content of the HTML page and appears in the browser’s main document window.

See also:

Text formatting

Using images

Linking pages


Text formatting
An introduction to HTML

Text formatting

To appear formatted in the browser, text must be enclosed in a pair of tags, known as the start tag and the end tag. The end tag with its extra slash character (“/”) indicates the end of the formatting. Here’s how boldface type is coded in HTML:

<B>This is text set in boldface.</B>

Tags can also be nested to assign multiple formats:

<B><I>This is text set in boldface and italics.</I></B>

Unlike word processing programs the final appearance of an HTML page is not based on the specific formatting that you apply. Rather than assigning an exact size and font, you specify the function of the text within the document—for example, that it should be displayed as a first-level head <H1>.

You have no way of knowing which hardware and Web browser your viewers will use. Text formatted in 14-point size may look good on a 14-inch monitor but is definitely oversized for a PDA (Personal Digital Assistant) display. HTML solves that problem by assigning a structure to text and letting the browser interpret it as the user specifies.

The following tags are used to format text:

See also:

Headings <H1>…</H1> through <H6>…</H6>

Font Styles

Paragraphs and Line Breaks

List

Special Characters

Horizontal Rules


Headings <H1>…</H1> through <H6>…</H6>
Text formatting

Headings <H1>…</H1> through <H6>…</H6>

display in a larger font size and frequently in boldface to make them stand out from the body text. The digits 1 through 6 represent the different levels in the hierarchy: H1 is a first-level heading, H2 a second-level sub-heading, H3 a third-level sub-heading, and so on.

See also:

Font Styles

Paragraphs and Line Breaks

List

Special Characters

Horizontal Rules


Font Styles
Text formatting

Font Styles

include Bold <B>, Italics <I>, and Underline <U>, as well as Teletype <TT>, a monospaced style. Additional logical styles are Strong <STRONG> and Emphasis <EM>, which display as boldface and italics in most (but not all) browsers, respectively.

See also:

Headings <H1>…</H1> through <H6>…</H6>

Paragraphs and Line Breaks

List

Special Characters

Horizontal Rules


Paragraphs and Line Breaks
Text formatting

Paragraphs and Line Breaks

use a paragraph tag <P> or a line break tag <BR> to break HTML text at a selected location. Both of these are start tags without end tags–that is, they do not need a closing </.> tag. The paragraph tag creates an empty line break above the following text. It can include attributes, such as in <P ALIGN="CENTER"> or <P ALIGN="RIGHT"> that control the alignment. The break tag lets the text wrap without creating subsequent white space.

Note: Unlike word processing programs, inserting carriage return characters doesn’t cause the text to break; the browser ignores them. Also, inserting multiple space characters will cause them to show up temporarily, all but one will be removed.

See also:

Headings <H1>…</H1> through <H6>…</H6>

Font Styles

List

Special Characters

Horizontal Rules


List
Text formatting

List

formatting includes numbers or characters such as bullets. Numbered lists start with <OL>, unnumbered lists with <UL>. An <LI> tag precedes each item in the list. The list ends with a </OL> or </UL> end tag, depending on whether it is numbered or unnumbered.

See also:

Headings <H1>…</H1> through <H6>…</H6>

Font Styles

Paragraphs and Line Breaks

Special Characters

Horizontal Rules


Special Characters
Text formatting

Special Characters

use a special notation, such as [&amp] for the ampersand (“&”) character.

See also:

Headings <H1>…</H1> through <H6>…</H6>

Font Styles

Paragraphs and Line Breaks

List

Horizontal Rules


Horizontal Rules
Text formatting

Horizontal Rules

divide pages using the <HR> tag. This tag can have WIDTH and SIZE attributes. You can indicate the width in pixels or in percent of the browser’s window. For example, to specify a rule that takes up 75 percent of the screen and is three pixels high, you can modify the <HR> tag as follows:

<HR WIDTH=75% SIZE=3>

See also:

Headings <H1>…</H1> through <H6>…</H6>

Font Styles

Paragraphs and Line Breaks

List

Special Characters


Using images
An introduction to HTML

Using images

Rather than physically inserting images in the page, HTML files use a special notation to tell the browser which image to display and which image to load. Images are referenced using the <IMG> tag, which is a simple tag without an end tag, for example:

<IMG SRC="myimage.gif" WIDTH="32" HEIGHT="32" ALT="Please enable image loading in your browser!>

This element displays the image file myimage.gif, sets its width and height to 32 pixels, and displays an alternative message if image loading is disabled in the browser.

Images can have other attributes—for example, ALIGN, which controls the position of the image relative to adjacent text, or HSPACE and VSPACE, which create extra horizontal or vertical spacing between the image and adjacent elements.


Linking pages
An introduction to HTML

Linking pages

What makes HTML such a unique tool is that it lets authors link related items of information, either locally within a site or across the entire World Wide Web. Information is linked by inserting hyperlinks, which use the following basic notation:

A. The HREF reference B. The visible text for the clickable link

The example above shows how to reference a page that is in the same folder as the source page of the link—for example, on your hard disk. The HREF attribute contains the reference to that page. The text that the start and end tags enclose is the clickable link that appears in the browser.

You can link to any page on the World Wide Web by specifying its exact location with a Universal Resource Locator (URL).

URL to www link

If you use this type of URL specification, you can only access the page via the Internet. It doesn’t work when the file is on your local hard disk.


Editing HTML code in Outline view
Working in HTML

Editing HTML code in Outline view

The Outline view, displays HTML code elements in a hierarchical, structured view. Using the Outline view, you can generate clean, valid HTML without typing a single element of code. You select tags and attributes from a menu or the toolbar, drag and drop items from the Palette, and use Point and Shoot to link pages and graphics. You can build Web pages from scratch, fine-tine your code, even define new tags and attributes.

To switch to the Outline view of a document:

Click the Outline tab in the document window.

A. Outline tab B. Triangle control expands or collapses element or view

Note: To use the Outline Editor, the HTML Outline Module must be enabled in the preferences.

See also:

Editing in Outline view

Navigating in Outline view

Inserting new HTML tags

Inserting text or comments

Inserting attributes

Toggling the binary format


Editing in Outline view
Editing HTML code in Outline view

Editing in Outline view

When you view a Web page in Outline view, the Outline toolbar appears. You can use this toolbar to insert and edit HTML elements or use equivalent commands in the Special menu. You insert new tags below the current selection in the HTML outline.

•   The New Tag button ( [image]) inserts a new HTML tag below the currently selected tag.

•   The New Attribute button ( [image]) inserts a new HTML attribute in the currently selected tag.

•   The New Text button ( [image]) inserts a new HTML text box below the currently selected tag.

•   The New Comment button ( [image]) inserts a new HTML comment box below the currently selected tag.

•   The New Custom Tag/New Foreign Item button ( [image]) inserts an empty tag so that you can enter non-HTML code in your document. For more information, see Web Technology Support.

•   The Toggle Binary button ( [image]) toggles the tag format from unary to binary and vice versa. Unary tags don’t have an end tag, while binary tags have a start tag and an end tag.

International script systems selected using any of the Adobe GoLive Encoding options are displayed as clear text, enabling users to edit foreign-language content—for example, Japanese or Chinese characters.

You can drag frequently used elements from the Basic and Forms tabs of the Palette and drop them anywhere in the Outline Editor window, just as you would in Layout view. After inserting a tag, you can edit its attributes. For more information see, Using the Palette.


Navigating in Outline view
Editing HTML code in Outline view

Navigating in Outline view

The outline that appears when you create or view a document in Outline view contains all of the essential elements of an HTML page. You can use this structure as a template and fill it with your own content.

•   HTML tags appear as box symbols.

•   Indents indicate an item’s position within the HTML hierarchy. The HEAD and BODY elements are indented to show that they are contained in the HTML element. The HEAD element in turn contains a TITLE element with a text box.

•   Start and end tags are connected by vertical lines to show that they are complementary items.

A. Current selection B. Start and end tag connectors C. Drag and drop handle

To navigate in Outline view:

1  Choose File > Open or File > New, and click the Outline tab ( [image]) in the document window.

2  To collapse or expand the outline, do one of the following:

•   Click the triangle on the HTML box to collapse the outline.

•   Click the triangle on the HTML box to expand a collapsed outline.

3  To navigate through the outline, do one of the following:

•   To move through the Outline view, use the arrow keys. The Up arrow selects the item above the current selection, and the Down arrow picks the one below. If the pointer is in a text box, the arrow keys move the pointer within the box.

•   To move through the attribute list of an element, use the arrow keys. The Up arrow selects the item above the current selection, and the Down arrow chooses the one below.

•   To expand or collapse the currently selected tag element, press Enter. Please note that this is only possible with binary tags (tags always used in pairs).

•   To repeatedly expand or collapse the currently selected tag element, press Shift-Enter (Windows) or press Shift-Return (Mac OS). Please note that this is only possible with binary tags.

•   To show the tag attribute list, press Enter.

•   To hide the tag attribute list, press Shift-Enter.

•   To activate the next text box, press Tab. To activate the preceding text box, press Shift-Tab.

•   To delete the current selection, use the Backspace key.

•   To activate the tag selection pop-up menu, Control-click (Windows) or Command-click (Mac OS) the tag name.


Inserting new HTML tags
Editing HTML code in Outline view

Inserting new HTML tags

While working in Outline view, you can insert HTML tags and define their types and attributes. You can either enter a tag name directly or select one from the Web Database. You may want to define tag attributes to fine-tune the appearance of your Web page. Attributes control the way a tag is displayed by the browser. Many tags support special formatting instructions, such as element alignment, color, and directory paths to resource files. Predefined attributes are available.

Outline view with new HTML tag

To insert a tag and define its type and attributes using the Outline toolbar:

1  In Outline view, select an HTML element in the outline.

2  Click the New HTML Tag button ( [image]) in the Outline toolbar, and insert an untitled HTML tag below the current selection.

3  To name the tag, do one of the following:

•   Enter the desired HTML tag name in the Untitled Tag text box, and press Enter. To enter tags directly, you should be familiar with the capabilities of the targeted browser. Unsupported tags will be ignored.

•   To use a tag from the Web Database deselect the tag text box, then Ctrl-click (Windows) or Command-click (Mac OS) the name, and choose an HTML type from the list in the pop-up menu.

4  To define an attribute, click the show/hide attributes triangle, and choose an attribute from the attribute pop-up menu.

5  To assign a value to the attribute, click the triangle to the right of the attribute, and choose a value from the values pop-up menu.

For information about adding additional attributes, see Inserting attributes.

A. Click the show/hide attributes triangle control to pop up the attribute list and select the desired attribute. B. Click this triangle control to pop up the values list and select the desired value.


Inserting text or comments
Editing HTML code in Outline view

Inserting text or comments

You can use the Outline toolbar to insert text boxes for entering content or comments in your Web page. Text entered in an HTML Text box will be visible on your Web page. (For example, a Text box might be associated with a block quote.)

Text entered in an HTML Comment box doesn’t appear in your Web page when viewed in a browser window. You can use comments to provide useful hints for editing documents at later dates—for example, if you intend to embed advanced features that require significant background information.

To add an HTML Text box or an HTML Comment box:

1  In Outline view, select an HTML element in the outline, and then do one of the following:

•   To add text to your page, click the New HTML Text button ( [image]) in the Outline toolbar.

•   To add comments to your page, click the New HTML Comment button ( [image]) in the Outline toolbar. You can place comments anywhere in your document, even outside of the HTML container tag.

A text box containing question marks is inserted below the current selection.

2  Type your text in the box. The text wraps automatically at the border of the text box. If you temporarily stop entering text and deselect the text box, you can resume your work by inserting the pointer where you stopped.

Note: Comments appear dimmed in Outline view, but they remain selectable and editable to remind you that these they won’t appear in your Web page.

Outline Editor window with comments


Inserting attributes
Editing HTML code in Outline view

Inserting attributes

You can add and edit tag attributes using the Outline toolbar. Attributes control the way a tag is displayed by the browser. Many tags support special formatting instructions, such as element alignment, color, and directory paths to resource files.

To add a new tag attribute:

1  In Outline view, select the tag you wish to add an attribute to.

2  Click the New HTML Attribute button ( [image]) on the Outline toolbar. A blank attribute appears below the other tag attributes.

3  Type an attribute name into the text box, and press Enter.

Note: If you are not sure whether an attribute is valid or not, consult the World Wide Web Consortium’s (W3C) Web site at www.W3.org.

4  Click the text box to the right of the name field, type in a value, and press Enter. If the attribute is valid, a color box, path pointer, or similar symbol appears to the right of the attribute name.

New attribute value

5  If necessary, select options for the attribute you’ve chosen. For example, if color is appropriate to the attribute (for example, the color of a link), a color box and the Web color code appear beside the attribute name. Clicking the color box displays the Color Palette.

If a path is appropriate to the attribute (for example, the directory path to the background image), a path pointer appears beside the attribute name. Clicking this path pointer opens a file selection dialog box.

Click this path pointer to pop up a file selection dialog.


Toggling the binary format
Editing HTML code in Outline view

Toggling the binary format

You can toggle the binary tag format on and off using the Outline toolbar. This allows you to determine whether a new tag has a complementary end tag or not.

Most HTML tags are binary tags, or container tags. Binary tags enclose their content in a pair of tags, called start and end or open and close tags. A few tags, however, do not need an end tag; these are called unary tags. One of the most frequently used unary tags is the IMG tag for embedding images.

To toggle the binary format on and off:

1  In the document window Outline view, select a binary HTML tag.

2  Click the Toggle Binary button ( [image]) in the Outline toolbar. By default, both halves of a binary HTML tag are displayed. This command changes only the currently selected tag.

Binary format toggled on and off


Editing HTML code in Source view
Working in HTML

Editing HTML code in Source view

In Source view, you can view your document’s HTML source code, check the HTML syntax, fine-tune your code, or even build Web pages from scratch. If you are a seasoned HTML programmer with a good working knowledge of HyperText Markup Language and have been using other text-oriented HTML editors, you’ll find Source view very useful for tweaking and fine-tuning the underlying HTML code. Working in Source view is like working in any HTML text editor. You can create a new document or open existing Adobe GoLive, HTML, or text documents. You can type or paste text from another document or application, and make and save changes.

You change to Source view by clicking the Source tab ( [image]) of the document window. A Source toolbar appears. Most commands are also available in the Special menu.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To set general source preferences

To build a custom browser set for the syntax checker

To edit or delete an existing browser set

To set font preferences

To set syntax highlighting preferences

To set printing preferences


Using drag and drop in Source view
Editing HTML code in Source view

Using drag and drop in Source view

When working in Source view, you can drag tags from the Basic and Forms panel of the Palette into the flow of your HTML code and use them as editable tag templates. After inserting a tag, you can edit its attributes and attribute values while the Source editor monitors your input and highlights typing errors or incomplete syntax. You enable this drag and drop capability in the Source preferences (see Setting Source preferences).

Drag and drop insertion of a line tag

You can also drag a color from the preview pane of the Color Palette and drop it on selected items in your HTML code (see Adding color). Or you can drag pages and URLs from the site window, to create a link.


Formatting Text
Editing HTML code in Source view

Formatting Text

In Source view, you can apply basic text formatting commands from the Format and Style menus to selected text in the body of your page. For more information, see Formatting text.

To format text:

1  In Source view ( [image]), do one of the following:

•   Select a paragraph, and then choose a paragraph style from the Format menu.

•   Double-click the text to highlight a single word, or click and drag to highlight more text. Choose Style and select the character style that you want.


Highlighting Syntax
Editing HTML code in Source view

Highlighting Syntax

As you enter and edit HTML code in Source view, the syntax highlighting feature works in the background, continuously monitoring your code and comparing it with the content and rules specified in the Web Database. When the syntax highlighting feature recognizes a tag, it highlights the start and end tags and tag attributes to indicate that the syntax is complete.

Syntax highlighting uses different colors to visually separate tags, attributes, and document content, making it easy for you to keep track of the HTML code.

To set syntax highlighting and text wrapping:

1  Click the Source tab ( [image]) in the document window.

2  In the Source view toolbar, set the highlighting and text wrap options. For information on changing the color of text highlighting, see Setting Source preferences.

•   Turn Syntax Highlighting Off button ( [image]) deactivates syntax highlighting, showing the HTML source code in the default text color.

•   Detailed Syntax Highlighting button ( [image]) activates syntax highlighting.

•   Highlight Media & Links button ( [image]) highlights images and media items only.

•   Highlight URLs button ( [image]) highlights references to other pages and locations on the Web.

•   Soft Wrap button ( [image]) toggles the wrapping of the source at the margin of the Source Editor window on and off.

•   Display Line Numbers button ( [image]) shows the code line numbers.


Checking syntax
Editing HTML code in Source view

Checking syntax

In Source view, you can check to make sure that your Web pages contain only valid and error-free code. The built-in syntax checker parses your HTML code against the coding rules stored in the Web Database and highlights code elements presumed faulty.

When you select specific HTML code and launch syntax checking, you can pinpoint which tags and attributes are not supported by a given set of browsers or are specific to Adobe GoLive. When you choose a browser set from the browser compatibility menu, an incompatibility list appears in the error log, detailing potential problems. The sets available in this menu are assembled when you set Source preferences. For more information, see Setting Source preferences.

Syntax warning in Source view

To check syntax:

1  In Source view toolbar, click the Display Errors button ( [image]) to check for syntax errors. The counter next to the button shows the number of syntax errors in the page.

2  Click the Display Warnings button ( [image]) to check for syntax warnings. The counter next to the button shows the number of syntax warnings in the page.

3  Click the Check Syntax button ( [image]) in the Source toolbar. The source code is verified and the syntax checker highlights the first code element presumed faulty. (If nothing is highlighted, your HTML code is correct.)

Check the error log above the main window area to learn more about these errors. The triangle control ( [image]) opens and closes the error log section of the Source Editor window. It opens automatically when the syntax checker detects faulty HTML code.

4  Correct each error, and then click the Check Syntax button again to make sure that all errors have been found.


Setting Source preferences
Editing HTML code in Source view

Setting Source preferences

You can customize the Source preferences that influence the behavior of the HTML syntax checker and appearance of HTML code in Source view:

•   Source settings turn on and off drag and drop support and control how HTML code appears in Source view. A preview pane in the dialog box shows you how the text will look with the preferences you choose.

•   Browser Sets settings let you combine browsers and revisions of the HTML specification into complex sets of HTML syntax rules. The sets you assemble here appear in the browser compatibility list in Source view. Based on the tag descriptions in Adobe GoLive’s Web Database, these preferences instruct the built-in syntax checker which rules to use when checking your source code.

•   Font settings control the default screen font that displays HTML code and content in the Source Editor window.

•   Colors settings let you turn syntax highlighting on and off and control the way the individual HTML tags and enclosed text are displayed in Source view when the viewer enables syntax highlighting.

•   Printing options control the default formatting options used when printing HTML source code.


To set general source preferences
Editing HTML code in Source view

To set general source preferences:

1  Choose Edit > Preferences, and click the Source icon.

2  Select from the options controlling how HTML behaves in Source view:

•   Enable Dragging of Marked Text turns dragging on or off.

•   Relaxed Checking of Special Characters lets you relax the rules applied to special characters when checking the syntax. Select this option to use uppercase characters (as found in older HTML files) and keep the syntax checker from looking for a trailing semicolon. For example, the &lttag&GT string will be interpreted as &lt;tag&gt;.

•   Do Not Mark Unknown Attributes As Errors determines whether the syntax checker ignores non-HTML or unknown tag attributes. For example, Adobe GoLive uses the custom COOL attribute to identify an HTML table as a layout grid. If you uncheck this option, the syntax checker will find and mark this attribute as unknown.

•   Text formatting in Source view. You can decide whether boldface display for HTML tags is on or off, whether lower-level HTML tags are automatically indented or not and tab size of the indent, whether you want line numbers to display at the left margin, and whether you want HTML to wrap automatically.

These settings are previewed in the preferences window.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To build a custom browser set for the syntax checker

To edit or delete an existing browser set

To set font preferences

To set syntax highlighting preferences

To set printing preferences


To build a custom browser set for the syntax checker
Editing HTML code in Source view

To build a custom browser set for the syntax checker:

1  Choose Edit > Preferences, and click Browser Sets under Source preferences.

2  Select New, and enter a descriptive name in the text box below the Browser Sets list.

3  Select the desired set of browers from the Browser list.

4  Select Default Browser Set if you want the syntax checker to default to the new browser set, and click OK.

You can now choose the new browser set from the browser compatibility list in source view. This new browser set will influence the behavior of the syntax checker.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To set general source preferences

To edit or delete an existing browser set

To set font preferences

To set syntax highlighting preferences

To set printing preferences


To edit or delete an existing browser set
Editing HTML code in Source view

To edit or delete an existing browser set:

1  In the Browser Sets preference panel, choose a set from the Browser Sets list.

2  Do one of the following:

•   To edit the set, choose a different set of browsers from the Browser list, and click OK.

•   To delete the set, choose Delete, and click OK.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To set general source preferences

To build a custom browser set for the syntax checker

To set font preferences

To set syntax highlighting preferences

To set printing preferences


To set font preferences
Editing HTML code in Source view

To set font preferences:

1  Choose Edit > Preferences, and click Font under Source preferences.

2  Choose a typeface, font size, and style for HTML code. This typeface appears only within Source view, not on your Web page. These settings are previewed in the preferences window.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To set general source preferences

To build a custom browser set for the syntax checker

To edit or delete an existing browser set

To set syntax highlighting preferences

To set printing preferences


To set syntax highlighting preferences
Editing HTML code in Source view

To set syntax highlighting preferences:

1  Choose Edit > Preferences, and click Colors under Source preferences.

2  Select preferences:

•   If you don’t want to use syntax highlighting, select No Syntax Highlighting. If you want to use syntax highlight, turn syntax highlighting off, or choose Detailed, Media & Links or URLs highlighting.

•   To select a custom color for an HTML code element, double-click the color box to open the color picker, and select a new color.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To set general source preferences

To build a custom browser set for the syntax checker

To edit or delete an existing browser set

To set font preferences

To set printing preferences


To set printing preferences
Editing HTML code in Source view

To set printing preferences:

1  Choose Edit > Preferences, and click Printing under Source preferences.

2  Select preferences:

•   Printer Specific Settings lets you print using color attributes for syntax highlighting (only useful on color printer), bold typeface, or line numbers.

•   Use Special Font lets you apply a custom typeface, size, and style.

Use these preferences when you want the printed version of your document in Source view to look different from the online version.

See also:

Using drag and drop in Source view

Formatting Text

Highlighting Syntax

Checking syntax

Setting Source preferences

To set general source preferences

To build a custom browser set for the syntax checker

To edit or delete an existing browser set

To set font preferences

To set syntax highlighting preferences


Adding unknown start and end tags
Working in HTML

Adding unknown start and end tags

HyperText Markup Language (HTML) is an ever-evolving language, and new tags are created often. To ensure that your Web pages are always up to date and use the latest technology, you can insert placeholders for tags that Adobe GoLive doesn’t recognize, type in the new tag names, and edit tag attributes.

To insert an unknown tag:

1  In Layout view, drag the Start Tag icon from the Head tab ( [image]) of the Palette to the head section of your document window.

2  In the Tag Inspector, enter the name of the new tag in the Tagname text box and press Enter.

3  Click the New button to add a new attribute. (This activates the text boxes below the list box.)

4  Enter an attribute name and value in the left and right text boxes and press Enter.

5   If the new feature requires a closing tag, drag the End Tag icon from the palette and repeat steps 2 through 4.

6  To delete the currently selected attribute, click Delete.


Using text macros with source code editors
Working in HTML

Using text macros with source code editors

Text macros save time if you frequently use the HTML, JavaScript, and WebObjects source code editors built into Adobe GoLive. They eliminate typing lengthy strings of source code for often-used tags and script elements.

Four text macros are stored in four editable files, which reside in a special Text Macros subfolder within the Modules folder in the Adobe GoLive program folder. One folder can hold a combination of tags; the other three are environment-specific:

•   The Default.macro file can hold any combination of HTML tags, JavaScript strings, and WebObjects code snippets. These objects can be inserted into any of Adobe GoLive’s editor windows. This file is Adobe GoLive’s default repository for text macros.

•   The HMTL Source.macro file can hold text as well as HTML tags. These macros can be inserted into the HTML source code displayed in Source view for a document.

•   The JavaScript Source.macro file holds prefabricated strings of JavaScript code. These tags can be inserted into the JavaScript source code displayed in the JavaScript editor.

•   The WebObjects Source.macro file holds snippets of WebObjects code. These code snippets can be inserted into the WebObjects source code displayed in the WebObjects declaration editor.

All text macro files are loaded when Adobe GoLive starts up to make them available throughout the application. The HMTL Source.macro, JavaScript Source.macro, and WebObjects Source.macro files, however, are loaded only if the appropriate program modules are enabled in the Modules Manager.

See also:

Inserting text macros into the source code

Defining text macros

Using delimiters

Automating insertion point placement and text selection

Calling a macro from within a macro

Using keywords as substitutes for control characters


Inserting text macros into the source code
Using text macros with source code editors

Inserting text macros into the source code

To insert automated source code, type the macro name and press Ctrl+M (Windows) or Command+M (Mac OS). This inserts the text macro identified by the word behind or below the text cursor, provided it exists in the default source macro file or source macro file for the editor you are currently using.

Text macros are case-insensitive, which means that you can enter their names in lowercase or uppercase characters, or any combination of lowercase and uppercase.


Defining text macros
Using text macros with source code editors

Defining text macros

You define text macros by opening the desired source macro file with Adobe GoLive or a text editor and then typing, copying and pasting, or dragging the appropriate code. Text macro definitions must have the following basic format:

MacroName [Delimiter]MacroContent[Delimiter]

The first element in a macro definition is the macro name you enter in the respective editor before pressing Ctrl+M (Windows) or Command+M (Mac OS). With the exception of spaces and tabs, you can use any combination of characters for a macro name, but you should restrict yourself to using letters and digits. The three source code editors differ in what they regard as self-contained words. For example, using a dollar sign ($) in a macro name might work in the HTML Source editor but will surely fail in the JavaScript editor because this character is an integral part of the JavaScript syntax.

Separated by a space character, the second element specifies the content of the macro, that is, the text that is actually inserted after you type the macro name and press Ctrl+M (Windows) or Command+M (Mac OS). The content element must be enclosed in two identical or complementary delimiter characters. When you prompt Adobe GoLive to insert a text macro, the macro interpreter will regard the first character after the separating white space as the delimiter and look for an identical character to determine where the content ends.

For example, an image tag macro with basic attributes could look like this:

image «<img "src=../GIFS/???.GIF" width="20" height="20">»

You can also use a text macro to insert a string of formatted text. Here is an example:

webdesign $This Web Site was designed using <B>Adobe GoLive.</B>$


Using delimiters
Using text macros with source code editors

Using delimiters

As already noted, delimiters tell Adobe GoLive’s text macro interpreter where the content of a text macro starts and ends. You can use any character as a delimiter, as long as you heed one basic rule: The delimiter may not occur in the macro content itself. You can even use white space and carriage returns to insert structured text and multi-line code, respectively.

Here is an example of improper delimiter usage:

image "<img "src=../GIFS/???.GIF" width="20" height="20">"

This macro definition won’t produce a usable result because it uses double quotes as delimiters. The double quotes are already used to enclose tag attributes in the HMTL tag definition, so Adobe GoLive will only insert the text before the second double quote character. The result would be:

image "<img

Note: As a general rule of thumb, you should refrain from using characters that are typically used as structural elements within the source code syntax, for example, the less than (<) and greater than signs (>) enclosing HTML tags.


Automating insertion point placement and text selection
Using text macros with source code editors

Automating insertion point placement and text selection

Normally, when inserting a text macro, Adobe GoLive’s text macro tool selects the entire insert. To ensure a smoother workflow, however, you can also place the insertion point or select text for overtyping anywhere in the insert.

Placing the insertion point in an insert is accomplished by adding a “vertical bar” character (“|”). Here is an example:

image «<img "src=|" width="20" height="20">"»

The vertical bar after the src attribute and “equal to” sign places the insertion point so that you can enter the attribute value without having to move the pointer to the desired location.

Selecting text for overtyping is accomplished by enclosing a placeholder word or string in single quotes. Here is an example:

image «<img "src=../GIFS/'???'.GIF " width="20" height="20">"»

The three question marks enclosed in quotes will be selected when you insert this example macro, allowing them to be overtyped with macro name “C” instead.


Calling a macro from within a macro
Using text macros with source code editors

Calling a macro from within a macro

To reduce overall typing work and make your macro files easier to maintain, Adobe GoLive’s text macro tool lets you reference other macros from within a macro.

To call another macro from within a macro, you need to enclose the name of that macro in dollar signs ($). The following example shows the proper syntax:

Macro #1:

meta-author «<META NAME="author" CONTENT="$author$"»

Macro #2:

author "Michael Daeumling"

Upon insertion of the meta-author macro, Adobe GoLive will automatically look for the second macro named “author” and insert its content at the specified location in the first macro, so the resulting text insert would read:

meta-author <META NAME="author" CONTENT=" Michael Daeumling"

If calling a second macro produces unexpected results, this may be due to a circular reference. Circular references occur if the second macro contains a reference back to the macro called in the first place. The text macro tool handles those circular references gracefully without entering an endless loop. Rather than that, it will suppress the circular reference and insert the macro name found at the beginning of the macro definition.

Here is a simple example:

A "A to $B$"

B "B to $C$"

C "B to $A$"

The resulting text insert would read:

A to B to C

As can be seen from the above example, Adobe GoLive ignores the circular reference pointing back to macro “A” and inserts the macro name “C” instead.


Using keywords as substitutes for control characters
Using text macros with source code editors

Using keywords as substitutes for control characters

As already noted, you can use three control characters to specify what happens when a text macro is inserted:

•   Single quotes (‘’) mark out a selection.

•   The vertical bar places the insertion point.

•   Dollar signs are used to reference another text macro.

Now and then, syntax rules may require that you insert a macro with any of those characters in it. For example, JavaScript syntax requires that text strings be enclosed in single quotes. This conflict is solved by substituting percent signs (or any other suitable character) for single quotes. The Adobe GoLive text macro tool has three built-in keywords that allow you to redefine control characters:

•   Selection lets you redefine the selection markers if single quotes are not allowed. Here is an example:

Selection = %

write.document.write('%what%')

•   Caret lets you redefine the insertion point marker if the vertical bar is not allowed—for example because it is used to express a a bitwise OR operation in JavaScript.

CARET = %

•   Macro lets you redefine the dollar signs enclosing a macro name.

MACRO = %


Using the Web Database

About the Web Database

The Global tab

The HTML tab

The Characters tab

The CSS tab


About the Web Database
Using the Web Database

About the Web Database

The Web Database is a basic building block of Adobe GoLive that helps maintain the integrity of your HTML code. It comes with a complete inventory of HTML tags, special character codes, and browser-specific style sheets that ensure correct usage within any file written and read by the application. The Web Database also serves as a reference manual, assisting Web authors in choosing the proper tags and attributes for the content of their pages. Tags and attributes can be inserted by dragging from the Web Database to the Source Editor tab.

You can edit several tabs of the Web Database to accommodate future tags as they emerge. For a discussion of the WebObjects tab, see the online manual Using WebObjects. You’ll find it on the application CD.

Note: Do not edit the Web Database unless you are expert in HTML. Serious damage to your files may result. After installing the application, make a backup copy of the Web Database folder. As you edit the database, make periodic backups.

Adding new tags, attributes, enumerations, or other items to the Web Database doesn’t automatically enhance Adobe GoLive functionality or add any icons to the Palette. To add new tags, you must hand-code them in the Source Editor or select them from the pop-up menus in the Outline Editor. User-added HTML elements are accepted as correct by the Syntax Checker.

If you make an error while editing the Web Database, you can always restore the Web Database to its original content.

To restore the original Web Database file:

1  Quit or exit from Adobe GoLive.

2  Open the Modules folder within the Adobe GoLive program folder, and then delete the Web Database folder.

3  Start Adobe GoLive. A minimal Web Database folder is created. Any edits you made are discarded.

To view the Web Database tabs:

To open the Web Database, choose Special > Web Database.

•   The Global tab ( [image]) contains options that control the internal formatting of the source code.

•   The HTML tab ( [image]) holds the complete Adobe GoLive inventory of HTML tags, covering the full scope of HTML 3.2 and a subset of the emerging HTML 4.0 standard.

•   The Characters tab ( [image]) includes all the special characters specified by ISO 8859-1 and the HTML 3.2 standard. This enables Adobe GoLive to map user-entered special characters to the correct Web-specific character codes.

•   The CSS tab ( [image]) offers specific style sheets for popular browsers on the major platforms. You can choose any style sheet to serve as the root (default) style sheet for previewing pages.

•   The XML tab ( [image]) lists Adobe GoLive and imported Document Type Definition (DTD) files.

•   The WebObjects tab ( [image]) contains the entire scope of WebObjects-specific tags supported by Adobe GoLive. You must install and activate the WebObjects module for this tab to appear in the Web Database window.


The Global tab
Using the Web Database

The Global tab

The Global tab ( [image]) of the Web Database window controls the general HTML syntax rules, including options such as automatic text wrapping, indentation, and lowercase/uppercase usage. Style tags span entire paragraphs and blocks.

You can preview any change you make to the HTML formatting preferences in the preview pane at the bottom of the window.

You can choose from several options:

See also:

Break text

Indent with

Line break character

Tag case

Attribute case

Quote attribute values

Color name translation

Alignment local in paragraphs

Styles can contain blocks


Break text
The Global tab

Break text:

Controls HTML code wrapping when displayed in Source view.


Indent with
The Global tab

Indent with:

Sets the indentation value and the type of indention for lower-level tags displayed in Source view.


Line break character
The Global tab

Line break character:

Specifies how line breaks are written based on your Web server platform:

•   Macintosh (CR) inserts a carriage return character only (default).

•   Unix (LF) inserts a line feed character only.

•   Windows (CR/LF) inserts a carriage return and line feed character combination.


Tag case
The Global tab

Tag case:

Specifies how HTML tags are written:

•   Upper Case uses only uppercase characters in tag names, as in <HTML>.

•   Lower Case (default) uses only lowercase in tag names, as in <html>.

•   Capital capitalizes the first letter of the tag name, as in <Html>.

•   Database driven writes the tag as specified in the Web Database.


Attribute case
The Global tab

Attribute case:

Specifies how HTML tag attributes are written:

•   Upper Case uses only uppercase letters in attribute names, as in <WIDTH>.

•   Lower Case (default) uses only lowercase letters in attribute names, as in <width>.

•   Capital capitalizes the first letter of the attribute name, as in <Width>.

•   Database driven writes the attribute as specified in the Web Database.


Quote attribute values
The Global tab

Quote attribute values:

Determines whether specified values in HTML tag attributes are enclosed in straight quotation marks:

•   Always (default) inserts quotation marks around attribute values, as in <IMG SRC="./image/advertise.gif">.

•   Except Numbers encloses all attribute values, except for numerals. In <IMG SRC="./image/advertise.gif"> the element is enclosed in quotes, while in <hr width=580> the number is not.

•   Only if Necessary inserts quotation marks if there is a risk of ambiguity.


Color name translation
The Global tab

Color name translation:

Determines whether color names are translated into mnemonics:

•   Do Not uses only hexadecimal RGB values, such as “#000000” for “Black”.

•   16 Basics (default) translates the RGB values of the 16 basic colors (“#000000” through “#FFFFFF”) to mnemonics (“Black” through “White”).

•   Netscape translates the RGB values of colors to Netscape-specific mnemonics such as “LavenderBlush,” if there is an equivalent.


Alignment local in paragraphs
The Global tab

Alignment local in paragraphs:

Encloses subsequent paragraphs with a center attribute in a <CENTER> tag. This option is active only if all document windows are closed.


Styles can contain blocks
The Global tab

Styles can contain blocks:

Encloses contiguous paragraphs or blocks of code with identical formatting in a single tag. For example, if the same font set is assigned to successive blocks, this option causes Adobe GoLive to write a <FONT>…</FONT> tag that spans those blocks.

Note: This option creates “dirty” HTML, that is, code that isn’t 100% “by the book.” It is supported by most browsers, but we recommend testing your pages on all popular browsers.


The HTML tab
Using the Web Database

The HTML tab

The HTML tab is the heart of the Web Database. It contains the entire range of HTML tags that Adobe GoLive can read, display, and write. They are sorted into categories by function, such as Master Containers, Forms, and Frames.

The Web Database holds the complete set of HTML tags known to Adobe GoLive at the time of publication, including both HTML-standard and browser-specific tags. All valid attributes, the types of values they support, and comments identifying the function of each tag are provided. HTML-standard tags include all those specified by the HTML 2.0 and 3.2 standard publications, plus some new HTML 4.0 forms tags. Nonstandard tags used to implement browser-specific features are also covered, such as the marquee tag for Microsoft Internet Explorer. You can add new tags to the database as they become available.

Pop-up tag and attribute lists give you direct access to the database when defining a tag element (see Inserting new HTML tags). In addition, you can open the database at any time and use it as a reference.

The WebDB Inspector lets you toggle between the structured and flat views.

See also:

Looking up HTML tags in the Web Database

Editing HTML tags in the Web Database

Adding and deleting items in the Web Database

Editing tags

Controlling tag spacing in the source code

Overriding default syntax error checking

Editing a new attribute

Editing a new enumeration


Looking up HTML tags in the Web Database
The HTML tab

Looking up HTML tags in the Web Database

If you have any doubts about the proper use of a tag and its attributes, open the Web Database window and select the tag. Tag information is displayed in the WebDB Tag Inspector.

To use the Web Database for reference:

1  Choose Special > Web Database.

2  Click the HTML tab.

3  Scroll through the list box, expand categories, and select the desired tag. The WebDB Tag Inspector displays the structural information for that tag:

•   The Comment text box identifies the function of the tag within an HTML document.

•   The Structure pop-up menu displays structural information for the tag. For example, Inline Invisible indicates that the tag encloses visible content but doesn’t display as a visible element in the browser. (For more information, see Editing tags.)

•   The Content pop-up menu indicates how the Source view arranges the content of a container tag—including inline tags, attributes, and visible content. For example, normal indicates that the content of a container tag is structured using line breaks, tabs, and spaces.

•   The End tag pop-up menu tells you whether or not an end tag is required.

4  In the Web Database window, expand the tag by clicking the symbol next to it. (If there are no attributes, the symbol won’t appear.)

5  Select an attribute to view its options in the WebDB Attribute Inspector:

•   The Attribute pop-up menu tells you whether the attribute is required or optional.

•   The Value type pop-up menu identifies the format of the attribute—Text or URL, for example.

•   The Value pop-up menu lets you select or enter a value if Create This Attribute is selected.

•   Some attributes expand to show their enumeration properties, which represent a fixed set of values an attribute can assume. For example, Get and Post are the enumeration properties for the Method attribute. If Adobe GoLive provides native support for a particular tag, these values display as menu options in the inspector.

6  Click the Version tab to view information on compatibility with browsers and HTML versions. For more information on the Version tab, see Overriding default syntax error checking.


Editing HTML tags in the Web Database
The HTML tab

Editing HTML tags in the Web Database

The Web Database window provides a convenient editing environment for adding, updating, or removing tags, attributes, and their properties. The commands available from the context-sensitive toolbar are equivalent to the editing commands in the Special > Web Database submenu.

Note: Before you add new items to the Web Database, be sure to check with the World Wide Web Consortium (W3C) Web site at http://www.w3c.org to avoid using unsupported tags in your pages.


Adding and deleting items in the Web Database
The HTML tab

Adding and deleting items in the Web Database

You can add new sections, tags, or enumerations.

To add or delete a new item:

1  Do one of the following in the HTML tab of the Web Database window:

•   Add a new section by deselecting everything and clicking New Section ( [image]). Only when nothing is selected is the New Section button enabled.

•   Add a new tag by selecting an existing section or tag and clicking New Tag ( [image]).

•   Add an attribute by selecting an existing attribute or its tag and clicking New Attribute  ( [image]).

•   Add an enumeration by selecting an existing enumeration or its attribute and clicking New Enumeration ( [image]).

•   Select an item and click Duplicate ( [image]), or choose Edit > Duplicate, and then edit the copy.

2  With the new item selected, edit the properties in the Inspector.

3  Delete an item by selecting it and pressing Delete (Windows) or Command-Delete (Mac OS).


Editing tags
The HTML tab

Editing tags

If you add a new tag, you must name it in the Basic tab of the WebDB Tag Inspector, describe its function, and set various options relating to its structure and content.

To edit a tag:

1  Create a new tag, enter its name without the enclosing greater than (>) and less than (<) characters in the Name text box, and press Enter.

2  Enter a description in the Comment text box, and press Enter.

3  Choose one of the following from the Structure pop-up menu:

•   Block creates a block-level container element that can contain other elements, such as the <BODY> tag.

•   Inline Visible creates an element that has visible HTML content. This element can only occur within a container element, such as the <IMG> tag.

•   Inline Invisible creates an element that can only occur within a container element, has visible HTML content, but isn’t visible itself (although it influences a visual property of the HTML content), such as the <BOLD> tag.

•   Inline Container creates a container element that can only occur within another container element. It can have both non-HTML content as well as visible HTML content, such as the <APPLET> tag.

•   Inline Killer is reserved for use with the <BR> tag.

4  Choose one of the following from the Content pop-up menu options to determine how Adobe GoLive treats the content of a tag when it reads or writes HTML:

•   Normal (default) instructs Adobe GoLive to treat the content as specified in the Structure menu.

•   Get All Spaces instructs Adobe GoLive to read the tag without eliminating extra white space. For example, this option allows Adobe GoLive to display spaces in a <PRE> tag.

•   Core Text uses the entire content of a tag without adding or deleting any elements. For example, this option lets Adobe GoLive read and write the non-HTML information contained in a <STYLE> tag or protect database calls enclosed in a custom <NOEDIT> tag.

5  Choose an option from the End Tag pop-up menu:

•   Required specifies that the tag needs an end tag and that Adobe GoLive is supposed to read and write it.

•   Optional (do not write) indicates that the tag does not necessarily need an end tag and that Adobe GoLive is not supposed to read or write one.

•   Optional (write) indicates that the tag does not necessarily need an end tag, but that you want Adobe GoLive to add it.


Controlling tag spacing in the source code
The HTML tab

Controlling tag spacing in the source code

For any tag within the Web Database, you can control some basic formatting options in the Output tab of the WebDB Tag Inspector.

To set basic formatting for the current tag:

1  Select the tag in the right pane of the HTML tab of the Web Database window.

2  In the WebDB Tag Inspector, choose a separation option:

•   Outside controls the vertical spacing between the tag itself and other elements above and below it.

•   Inside controls the vertical spacing between the start and end tags and their content.

3  Select the Indent content option to indent the content of the tag.


Overriding default syntax error checking
The HTML tab

Overriding default syntax error checking

For any tag within the Web Database, the Version tab of the WebDB Tag Inspector lets you specify a browser or HTML version and set custom attributes. The Web Database describes the behavior of browsers using defined sets of HTML tags, attributes, and enumerations. When you create a custom tag, you can specify whether the syntax checker will flag it as an error.

The browser sets you create in the Browser Sets Source Preferences dialog box (Edit > Preferences) let you select multiple browser descriptions. When you work in the Source tab, every tag is verified against the tags defined in the Web Database under the selected browsers.

The browser compatibility settings you make for a particular tag determine what happens when you choose an option from the browser compatibility menu in the Source Editor and launch syntax checking (see Checking syntax). This checking flags syntax errors, but in Outline view your choices are directly determined by the definitions in the Web Database.

Note: The Browser Sets Source preferences and settings in the Version tab of the WebDB TagInspector do not affect how Adobe GoLive writes HTML code, nor do they affect how your pages are displayed by the selected browsers.

To edit syntax checking behavior:

1  Locate the browser or HTML version in the Version tab of the Inspector, and click the option next to it.

2  Select Can Have Any Attribute to allow attributes other than those the Web Database specifies.


Editing a new attribute
The HTML tab

Editing a new attribute

If you add a new attribute to a tag, you must name it in the Basic tab of the WebDB Attribute Inspector, describe its function, and set its required status and value options.

To edit an attribute:

1  Create a new attribute, enter its name in the Attr Name text box, and press Enter.

2  Enter a description in the Comment text box, and press Enter.

3  Choose an option from the Attribute Is pop-up menu:

•   Optional indicates that the attribute is not necessary for the browser to interpret the tag correctly.

•   Required specifies that the attribute must be used in order for the browser to interpret the tag correctly.

•   Alternate indicates that both Optional and Required are accepted. The Adobe GoLive syntax checker won’t mark the tag as faulty if the attribute is omitted.

4  Choose an option from the Value Type pop-up menu:

•   Text allows any Western-encoded alphanumeric character string. Use this option if you are not sure about the usage.

•   Encoded Text allows any alphanumeric character string in any encoding.

•   Number allows a numerical value only.

•   Enumeration allows multiple options.

•   Color permits an RGB color code only.

•   URL allows a Universal Resource Locator only.

•   JavaScript allows JavaScript code only.

5  Select Create This Attribute, and select a value from the Values pop-up menu:

•   Create Attribute inserts the attribute into the source code when the user drags its parent tag from the Web Database into the Source Editor or selects it from the Outline Editor pop-up menus.

•   Default lets you specify the default value the attribute should have when its parent tag is inserted into the source code.

6  Click the Version tab, and specify compatibility with a browser or HTML version, as described in the section Overriding default syntax error checking.


Editing a new enumeration
The HTML tab

Editing a new enumeration

If you add a new enumeration option list to an attribute, you must name each item in the Basic tab of the WebDB Enum Inspector and describe its function.

To edit an enumeration option:

1  Create a new enumeration, enter its name in the Enum Name text box of the WebDB Attribute Inspector, and press Enter. The name you specify here is one of the values the attribute can assume.

2  Enter a description in the Comment text box, and press Enter.

3  Click the Version tab, and specify compatibility with a browser or HTML version, as described in the section Overriding default syntax error checking.

Add and name enumerations as necessary. All enumerations you specify for an attribute appear in the Value pop-up menu when you select Create This Attribute in the Basic tab of the WebDB Attribute Inspector.


The Characters tab
Using the Web Database

The Characters tab

HTML uses a specific notation for encoding special characters to ensure a uniform display across multiple computer platforms. The Characters tab includes those special characters, as specified by ISO 8859-1 and the HTML 3.2 standard. Adobe GoLive uses the content of the Characters tab to map special characters you enter to the proper Web-specific character codes. These special characters fall into three categories:

•   Basics contains often used special characters, such as quotation marks (““), ampersand (&), greater than (>), and less than (<).

•   Characters lists the entire set of Western-language characters.

•   General punctuation includes variants of spaces and dashes.

Each character appears with its HTML name, visual image, Mac OS and ISO codes, and a textual description.

See also:

Viewing special characters

Adding and editing special characters


Viewing special characters
The Characters tab

Viewing special characters

As with the HTML tags stored in the Web Database, you can view the entries in the Characters tab in the Inspector. If a character can’t be displayed in the system font, a small box in the Char column of the Characters tab appears instead of the character.


Adding and editing special characters
The Characters tab

Adding and editing special characters

Use the following guidelines when adding new characters:

•   New characters must be W3C-specified characters that are supported by browsers.

•   Mac OS doesn’t display some characters that display on other platforms. To preview such characters, you may have to launch a browser.

•   Characters specific to Mac OS can be added, but they won’t display in browsers.

To add a special character:

1  In the Character tab of the Web Database window, select an existing special character or a section where you want to add the character.

2  Click New Character ( [image]) on the toolbar.

3  Select the new character, and edit its properties in the WebDB Character Inspector window:

•   Enter the HTML name of the new character in the left Name text box.

•   Enter the HTML code of the new character in the right Name text box, enclosing it in a leading ampersand and a trailing semicolon.

•   Enter a description in the Comment text box.

•   Enter the ISO mnemonic code and its equivalent byte code in the ISO Code text boxes.

•   If there is a Mac OS equivalent, select Mac, and enter the mnemonic code and its equivalent byte code. If the character exists on Mac OS, you can see it in the preview pane.

•   Select Write to write the contents of the adjoining text box into the document rather than the contents of the Name text box.

4  Click the Version tab, and specify error checking preferences, as described in the section Overriding default syntax error checking.


The CSS tab
Using the Web Database

The CSS tab

The CSS tab ( [image]) of the Web Database contains default style sheets for all major browsers on Windows and Mac OS. These are primarily used for previewing pages with the Layout View Controller. (See Previewing with cascading style sheets.) They let you simulate how fonts and other design elements display on Windows and Mac OS. They do not affect how Adobe GoLive writes HTML code, or what the end user sees when visiting your site. The default style sheets contain styles with tag selectors because styles need to be applied automatically to preview.

Note: Do not confuse these default style sheets with the style sheets that you create and reference using the <style> tag in your HTML files.

Further options include a check box for using style sheets, a default unit menu, and options for controlling how the Source mode formats style sheets.

You can also duplicate an item and edit it to create a user-defined style sheet in the Root menu of the Layout View Controller.

To make general settings for cascading style sheets:

1  Deselect Use Style Sheets to turn style sheets off throughout the application. This action is optional.

2  Select an option from the Default Unit pop-up menu to determine what unit the CSS Selector Inspector uses.

3  Select an option from the Output pop-up menu to determine how style sheets are formatted in the source code. The options in this menu vary the horizontal and vertical spacing between selectors and rules.

See also:

Viewing the default style sheets

Creating your own default style sheet

Previewing the effects of different default style sheets


Viewing the default style sheets
The CSS tab

Viewing the default style sheets

The default style sheets in the CSS tab of the Web Database are write-protected. You can only inspect their properties.

To view the default style sheets:

1  Select a style sheet from the list in the left pane of the Web Database window.

2  In the CSS Style Sheet Inspector, click the Basic tab to view the name, system, and comments.

3  Select the Settings tab to view the screen resolution and Can Handle Style Sheets status.

4  Click the Source tab to view the source code.


Creating your own default style sheet
The CSS tab

Creating your own default style sheet

You can create a new default style sheet if you want more previewing options in the Layout View Controller. The style sheet toolbar (see Creating a style sheet) helps you create a style sheet.

To create a new default style sheet:

1  In the left pane of the Database window, select the default style sheet that best suits your requirements.

2  Click Duplicate ( [image]) in the style sheet toolbar to create an exact copy, complete with all styles and properties.

3  Select the new style sheet, and click the Basic tab of CSS Style Sheet Inspector. Enter a name, system information, and comments. Click the Settings tab, and enter screen resolution (96 is typical for Windows, 72 for Mac OS) in the DPI text box, and select Can Handle Style Sheets. The source tab displays the HTML code.

4  Select what you want to edit. Use the CSS Selector Inspector to make changes as necessary. For more information, see Using Cascading Style Sheets.

5  When you finish editing the new style sheet, select the adjacent check box (Windows) or click the Root button (Mac OS) for your new style sheet. This changes the default style sheet used when previewing all subsequent pages and sites.

6  Close the Web Database. Changes are saved automatically.


Previewing the effects of different default style sheets
The CSS tab

Previewing the effects of different default style sheets

The Root style sheet you select in the CSS tab of the Web Database determines the defaults used in your pages and site. But you can use the Layout View Controller to preview how your documents appear under different style sheets.

To preview your pages with different default style sheets:

Click the Layout tab of your document window, and click the eye icon ( [image]) above the scroll arrow. In the Layout View Controller, select the new style sheet from the Root menu and view the effects of your new style sheet.

Note: This temporary preview affects only this document. If you want to preview routinely using the style sheet you selected in the Layout View Controller, you must set it as the Root style sheet in the CSS tab of the Web Database.


Building Web Sites

•   Create a new site from scratch or import existing material.

•   Design a site’s structure graphically, adjust its hierarchy, add pages, delete pages, and open individual pages, as well as verify, change, and update links.

•   Monitor the integrity of your hyperlinks and references to image and media files.

See also:

Using the site window

Using the site toolbar

Creating a new site

Setting up the site

Navigating the site

Adding content to a Web site

Adding resources to a site

Adding color to a Web site

Adding font sets to the site window

Inspecting links in the site


Using the site window
Building Web Sites

Using the site window

The site window is the key to building your Web site.

•   It allows you to collect and manage your resources using iconized lists of Web pages, text documents, media files, images, Universal Resource Locators (URLs), mail addresses, colors, and font sets.

•   It alerts you to problems due to broken links and dangling resources, lets you access your site on the Web server via FTP, and allows you to manage stationery for your Web pages.

•   It is the target for the Point and Shoot button that lets you link or reference objects in your site with ultimate ease.

•   It allows you to accurately view the names of files and their extensions in your site.

When you create a site document and view the site in the Adobe GoLives site window, you’ll find that the folder structure is exactly the same as on your desktop. Because the site window relies on your operating system’s file management capabilities, the site window looks somewhat different on various versions of Windows and Macintosh operating systems.

Windows: A. Site folder B. Subfolder of the site folder containing HTML pages and resources C. Subfolder of the site folder containing site graphics D. Home page of the site

Mac OS: A. Site folder B. Subfolder of the site folder containing HTML pages and resources C. Subfolder of the site folder containing site graphics D. Home page of the site


Using the site toolbar
Building Web Sites

Using the site toolbar

The site toolbar offers a variety of tools for viewing, for file and folder management, and for FTP access to Web servers. The following toolbar buttons are available for performing tasks in the Files and FTP tabs:

The New Folder button ( [image]) creates a new folder, both in the site window and on your desktop.

The Open button ( [image]) opens the currently selected file or folder.

The Delete Selected Item button ( [image]) moves the currently selected file or folder to the Recycle Bin or Trash. Before deleting, you are prompted to confirm.

The Show Information in Finder button ( [image]) displays the file information dialog. (Equivalent to the Properties command—Windows; and equivalent to the Get Info command in the Finder—Mac OS.)

The Reveal in Finder button ( [image]) shows the selected file or folder. (Equivalent to the Reveal command in the Finder—Mac OS.)

The Find Files in Site button ( [image]) opens the Find File tab of the Find dialog box to let you search files or folders in your site.

The Update button ( [image]) synchronizes the content of the Files tab in the site window with the actual content of the site folder, adding new pages and media files. For other tabs in the site window, it scans the pages in your site and adds any e-mail addresses and URLs found to the External tab, colors to the Colors tab, and font sets to the Fontsets tab. When the root level of the site folder is displayed in the file list of the site window, clicking this button scans the entire site folder. When a subfolder of the site folder is displayed, clicking this button scans the current subfolder only, ignoring any other folders in the site folder as well as the root level of the site folder.

The Open Link Inspector button ( [image]) opens the Link Inspector window for the currently selected page or resource file.

The Change All References button ( [image]) opens a dialog box that lets you change all references to the selected file throughout your site.

Important: There is no undo option for the Change All References button.

The Site Settings button ( [image]) opens a dialog box with basic site settings, such as home page info, FTP server settings, and preferences for the Clear Site feature. (You can also choose Site > Settings to access this dialog box.)

The FTP Server Connect/Disconnect button ( [image]) opens an FTP session with the server specified using the Settings button.

The Upload to Server button ( [image]) updates files on the server during an FTP session, overwriting them with any newer files from the local volume. Use this button after editing files on your local volume.

The Download from Server button ( [image]) updates files on the local volume during an FTP session, overwriting them with any newer files from the server. Use this button after editing files directly on the Web server.

The following buttons are available on the site toolbar when the Site tab is open:

The Navigation Hierarchy button ( [image]) switches the Site tab to Navigation Hierarchy mode, where you can design the structure of your site.

The Link Hierarchy button ( [image]) switches the Site tab to Link Hierarchy mode, which is a view-only mode that lets you survey the hierarchy of your site.

The Arrange Items button ( [image]) cleans up the Site tab. (The Arrange Items button is unavailable when you open a site for the first time; the site is autoarranged by default.)

The Open Site Navigator button (Windows: , Mac OS: ) opens the Site Navigator window, which lets you navigate large sites by dragging a marquee.


Creating a new site
Building Web Sites

Creating a new site

Whenever you create a new site (where SiteName is the name you assign to your site), Adobe GoLive creates the following:

•   SiteName.site (Windows) or SiteName.p (Mac OS). A site document created by Adobe GoLive that enables your site to display in the site window.

•   SiteName folder. A root folder that stores your pages and media, the contents of your Web site. When you create a new site, a blank homepage (index.html) is created in this folder. The contents of this folder are displayed in the site window.

•   SiteName.data folder. A folder that holds auxiliary material needed to build and maintain a site. This folder won’t be uploaded with your Web site. You can view the contents of this folder in the expanded view of the site window.

You can choose whether to create an umbrella folder (SiteName Folder in Windows, SiteName f in Mac OS) to group these automatically created documents and folders. Creating the umbrella folder is recommended.

Contents of new site in Windows and Mac OS

(Media and pages folders are not created for a new site.)

See also:

Viewing a site using the Files tab

Creating a site from scratch

Creating a site by importing pages and resources

Creating a site by importing from an FTP server

Resolving missing files and broken links


Viewing a site using the Files tab
Creating a new site

Viewing a site using the Files tab

When you create a site or open an existing site, the site window automatically opens to the Files tab of the site window. By default, the Files tab of the site window displays the following:

•   A list of the folders that store the contents of your site. In Windows, a pane on the left of the Files tab displays these folders. In Mac OS, a pop-up menu above the window of the Files tab displays the name of the currently selected folder; other folder names are listed in the menu.

•   The contents of the currently selected folder. In Windows, these contents are displayed in a pane on the right. In Mac OS, these contents are displayed in the window below the pop-up menu.

You can expand this default site window to view the contents of the folder that holds the auxiliary material needed to build and maintain a site (the contents of the SiteName.data folder). In Windows, you expand the window vertically by clicking the right arrow at the lower left of the site window and, if necessary, the Extra tab. In Mac OS you expand the window horizontally to show the right pane by clicking the icon in the upper right corner and, if necessary, the Extra tab.

Windows: Click to open the bottom section of the site window. The bottom panes show the Errors tab, the FTP tab, and the Extra tab.

Mac OS: Click to open the right pane of the site window. The right pane shows the Errors tab, the FTP tab, and the Extra tab.


Creating a site from scratch
Creating a new site

 Creating a site from scratch

To create a site from scratch, you must create a new site in a new site folder.

To create a new site document:

1  Choose File > New Site > Blank.

2  To create an umbrella folder (recommended), select Create Folder.

3  Type a site name, and then either navigate to select an existing folder or create a new folder.

The new site automatically opens in the site window.


Creating a site by importing pages and resources
Creating a new site

 Creating a site by importing pages and resources

You can create a site by importing the contents of a local folder or a folder from any volume mounted on the desktop without compromising the integrity of any links within the structure. Creating a site by importing is useful if you need to use site files created on a different platform or using a different application.

See also:

To create a site by importing from a local folder

To create a site by dragging and dropping


To create a site by importing from a local folder
Creating a site by importing pages and resources

To create a site by importing from a local folder:

1  Choose File > New Site > Import from Folder.

2  Navigate to select the desired site folder and the desired home page, and click Import to import the existing site. If you navigate to select the home page of an existing site, then the path to the associated site folder will automatically appear in the Import Site Folder dialog box.

If there are any orphans, broken links, or missing items, you are alerted by error indicators appearing in the Errors tab of the expanded site window. For more information, see Maintaining site integrity and Managing objects using the File Inspector.

3  Save or rename the site by choosing File > Save As. In Windows, you should be sure to navigate up a directory level before saving the site window, otherwise your site window will be in the same folder as your index.html home page, which is not recommended. (In Mac OS, add the π extension by typing Option-p.)

See also:

To create a site by dragging and dropping


To create a site by dragging and dropping
Creating a site by importing pages and resources

To create a site by dragging and dropping:

1  Choose File > New Site > Import from Folder.

2  Import a folder or home page by dragging it from the desktop to the appropriate text box in the Import Site Folder dialog box.

3  Click Import.

See also:

To create a site by importing from a local folder


Creating a site by importing from an FTP server
Creating a new site

Creating a site by importing from an FTP server

You can download existing material from an FTP server and create a new site in one action. First establishing your FTP settings, and then select the home page on the remote server. Then specify the target folder on your hard disk, connect to the server, and launch the file transfer. A site document is created.

To import a site from an FTP server:

1  Choose File > New Site > Import Site from FTP.

2  Specify the following information:

•   The FTP address specified by your ISP for the Web server you want to download the site from. If you have set an FTP server in the FTP Server Network preferences, you can select this server from the pop-up menu.

•   The directory path to the required folder on the Web server. If, for Server, you select the FTP server specified in the FTP server Network preferences, you can click Browse to initiate a server connection and navigate to the required folder.

Note: If you specify a directory, Adobe GoLive tries to connect to that directory. In most cases, however, you can leave this text box blank; your access privileges are typically restricted to your personal folder.

•   Your user ID.

•   In the Password text box, type in your personal password.

•   The number of the port you use to access your Web server. (21 is frequently used.) If in doubt, ask your server administrator. You may have to select Use Passive Mode. For more information, see Setting up FTP access.

3  Select the home page on the remote server by clicking Browse to initiate the server connection and navigating to the home page.

4  Select the target folder in which to create the new site.

5  Click OK to start downloading.

Adobe GoLive creates an untitled site document and displays the files of the newly downloaded site in the site window.

6  Save the site document.

Note: After importing a site using FTP, don’t forget to disconnect from the network if you connected using a modem.


Resolving missing files and broken links
Creating a new site

Resolving missing files and broken links

When you import files, folders, or Web pages, you may encounter missing files or broken links. For information on resolving these problems, see Maintaining site integrity.


Setting up the site
Building Web Sites

Setting up the site

The Adobe GoLive Site tab ( [image]) provides a full-featured site designer for laying out your site, even before you add content to your pages. After creating a new site document, you can switch to the Site tab and design your site by creating a hierarchy of empty placeholder pages. You can create child pages and sibling pages. A child page appears at a lower level in the hierarchy, a sibling page at the same level. These placeholder pages are held in a New Files folder within your site folder. When you are finished designing your site, you can begin filling the new pages with content and creating physical links. If you created a new site by importing material, you can switch to the Site tab to organize and refine the site structure and check for broken links and missing files.

Once saved in Layout view, HTML pages display as thumbnail previews if your Site View Controller is set accordingly.

You can control how links, files, and folders are displayed and set the type of icon used to represent objects. You make these settings in the Site View Controller or in the Site preferences. For more information, see Setting the Site preferences.

See also:

To open the Site View Controller

To change the arrangement in the Site tab

To hide or show classes of objects

To customize the site display

To set colors


To open the Site View Controller
Setting up the site

To open the Site View Controller:

Click the eye icon ( [image]) in the upper right corner of the Site tab.

See also:

To change the arrangement in the Site tab

To hide or show classes of objects

To customize the site display

To set colors


To change the arrangement in the Site tab
Setting up the site

To change the arrangement in the Site tab:

1  In the Arrange tab of the Site View Controller, select Link Hierarchy to control the mode in which the Site tab displays pages. Select Navigation Hierarchy when you want to design a site.

2  Select Auto Arrange Items to let all symbols snap to grid. (Use the Horiz. and Vert. text boxes in the Display tab to adjust grid spacing.)

3  Select Stagger Items to use a staggered (as opposed to a straight) grid.

4  Select Use “Hide/Show” Live Button to display the up and down arrow live buttons.

5  Select Show Side-Knots to turn the forward and backward link arrows on.

Note: The Use “Create New Page” Live Buttons and Navigation Hierarchy options are reserved for use in Navigation Hierarchy mode. For more information, see Adding empty pages.

See also:

To open the Site View Controller

To hide or show classes of objects

To customize the site display

To set colors


To hide or show classes of objects
Setting up the site

To hide or show classes of objects:

1  In the Filter tab of the Site View Controller, select any of the objects in Show Items that should appear in the Site tab. Missing Files lists any missing items in the Errors tab in the expanded pane of the site window.

2  Select the Reachable from Homepage options to determine whether you want only referenced items to appear in the Site tab:

•   Show Item If Reachable displays any item that can be reached via hyperlinks—either directly from the home page or from lower-level pages.

•   Show Item If Unreachable shows all items in the Site tab, regardless of whether they are referenced.

See also:

To open the Site View Controller

To change the arrangement in the Site tab

To customize the site display

To set colors


To customize the site display
Setting up the site

To customize the site display:

1  In the Display tab of the Site View Controller, select any of the Show Items As options to select the appearance of page symbols.

2  Select Page Title or File Name to determine how the site window identifies pages.

3  In the Grid Spacing group of options, enter a value in pixels in the Horiz. and Vert. text boxes to resize the grid. The snap-to grid is activated by the Auto Arrange Items option in the Arrange tab. For more information, see Using the layout grid.

4  Enter a value in pixels in the Frame Size Width and Height text boxes to set the size of the page symbols displayed in the Site tab. The size you specify here is applied to symbols displayed as Frames, Thumbnails, or TV Screens.

5  Select any line (link) shape.

6  Select a Display option. The Outline view combines the customary file list and tree metaphors from the Files and Site tabs of the site window in a structured hierarchical list view. It is available both for the Link and Navigation Hierarchy modes of the Site tab.

Site in outline view

See also:

To open the Site View Controller

To change the arrangement in the Site tab

To hide or show classes of objects

To set colors


To set colors
Setting up the site

To set colors:

1  In the Color tab of the Site View Controller, click any of the color fields to open the Color Palette and assign custom colors to the background of the Site tab window, to links, navigation arrows, and tips, to buttons highlighted by user selection, and to selected items. For information on using the Color Palette, see Adding color.

2  Select an option from the Item Color section to override the default or custom color used to display pages:

•   Status Label lets each page symbol assume the custom color defined for its page status. You can assign page statuses in the File Inspector and define them in the Site Page Status Preferences dialog box. For more information, see Managing objects using the File Inspector.

•   Monochrome lets you choose a custom color for all page symbols that appear in the Site tab. Double-click the color box to display the Color Palette, and drag a color to the color box in the Site View Controller.

•   In Mac OS, Finder Label lets each page symbol assume the color of the label assigned to the physical file in the Finder. You can assign finder labels in the File Inspector. For more information, see Managing objects using the File Inspector.

See also:

To open the Site View Controller

To change the arrangement in the Site tab

To hide or show classes of objects

To customize the site display


Navigating the site
Building Web Sites

Navigating the site

The Site tab has a number of tools that are especially useful for laying out and navigating large sites.

See also:

To zoom in and out of the Site tab

To collapse and expand branches of the site tree


To zoom in and out of the Site tab
Navigating the site

To zoom in and out of the Site tab:

Locate the Zoom menu at the lower left corner of the Site tab. Do one of the following:

•   Choose a zoom factor (from 10% to 150%) to view more or fewer details in the Site tab, or fit the site in the window.

•   Control-click anywhere in the Site tab and drag to zoom in on pages.

See also:

To collapse and expand branches of the site tree


To collapse and expand branches of the site tree
Navigating the site

To collapse and expand branches of the site tree:

1  To hide pages, move the pointer over the page symbol whose child or parent pages you want to hide. Up arrows and down arrow live buttons appear at the top and bottom of the symbol. Click the arrow on top or bottom of the page symbol. If you hide pages above the current page, Adobe GoLive collapses anything at a higher level, including the home page. A right arrow and a a stack of icons identify the collapsed part of the site tree.

The up arrow (or down arrow) indicates that the section above (or below) this page is fully expanded.

2  To expand the site tree one level at a time, click the right arrow. To redisplay the entire site tree above or below the current page, Option-click (Mac OS) the right arrow.

The right arrow indicates that this page has been collapsed.

To navigate in the site window:

In the Site tab of the site window, use the up and down arrow keys on your keyboard to jump between hierarchy levels, and use the left and right arrow keys to move sideways between pages at the same level.

To navigate a site using the Site Navigator:

1  Click the Open Site Navigator button (Windows: , Mac OS: ) in the site toolbar. (If this button is dimmed, select Site View in the Display tab of the Site View Controller.)

2  In the Site Navigator window, drag the marquee around what you want to display. As you drag, the view in the site window changes, showing other sections of the site.

Note: You can only drag the marquee if the information in the site window extends beyond the current view.

The first number in the display at the bottom of the Site Navigator window shows the number of items visible in the Site tab; the second number shows the total number of items in the Site tab, both visible and invisible.

See also:

To zoom in and out of the Site tab


Adding content to a Web site
Building Web Sites

Adding content to a Web site

After you have created your site folder, you have a variety of ways to add new pages, import files, URLs, and e-mail addresses.

See also:

Switching to the Navigation Hierarchy mode

Adding empty pages

Naming pages

Adding stationery

Linking pages


Switching to the Navigation Hierarchy mode
Adding content to a Web site

 Switching to the Navigation Hierarchy mode

To make site design tools available when you are adding new pages, you must be in Navigation Hierarchy mode.

To switch to the Navigation Hierarchy mode:

1  In the Arrange tab of the Site View Controller, select Navigation Hierarchy.

2  Select Use “Create New Page” Live button to activate the live buttons with the small page symbol that create a new page when clicked.

3  Select Use “Hide/Show” Live Button to display the up arrow and down arrow live buttons if you want to be able to collapse parts of the site tree.

4  Select Show Side-Knots to turn the forward and backward link arrows on.

5  If your site has pages and hyperlinks already in place, click New from Site. This overlays the arrows representing physical links with a navigational hierarchy, allowing you to add new pages in the Site tab. If you are not satisfied with your design, this button resets the Site tab and removes all new pages and navigational links.

6  Click From Navigation to generate a table of contents with clickable links from the titles of the pages in your site. This is a useful navigation aid when you start working on page content.


Adding empty pages
Adding content to a Web site

Adding empty pages

Whether you created a Web site from scratch or imported a site, you probably want to add pages and other resources.

To add an empty page to the Site tab:

1  Make sure that you are in Navigation Hierarchy mode and that the “Hide/Show” Live Buttons option is activated in the Site View Controller window. (Live buttons appear when you move the pointer over a page symbol.)

2  Move the pointer over the start page. (If you design a site from scratch, you start with the index.html page.) A Create New Page button ( [image]) fades in to the left, right, or at the top or bottom of the page symbol, depending on where you move the pointer. The symbol fades out when you move the pointer in any other direction or away from the page symbol. Click the Create New Page Live button to insert a new page:

•   The top button inserts a parent page (and a new hierarchy level) above the current page. This button is not available for the home page.

•   The bottom button inserts a child page below the current page.

•   The left or right button inserts a sibling page to the left or right of the current page. This live button is not available for the home page.

3  A new page is identified by a yellow pending indicator ( [image]) in the lower right corner of its symbol. This indicator does not disappear until you open the page, modify it, and save it. For more information, see Linking pages.


Naming pages
Adding content to a Web site

Naming pages

The page title that appears at the top of the document window, next to the page icon ( [image]), is an important element in your page and site design. The default page title for a new page is “Welcome to Adobe GoLive 4.” If you click the Source tab, you see that this same title is enclosed in the HTML title tags. Be sure to customize this page title because this is the title users will see in the title bar of their browser window, and this information will be used by search engines.


Adding stationery
Adding content to a Web site

Adding stationery

Stationery is particularly useful if you want to keep the layout of your pages consistent when designing a site. Using stationery is equivalent to using a template. For more information, see Managing stationery in the site window.

To add a new page by importing stationery:

1  Select Stationeries from the pop-up menu at the bottom of the Site Extras tab ( [image]) of the Palette.

2  Drag the desired stationery to the page to which you want to add a child, sibling, or parent, and drop the stationery on the appropriate live button to add a new page with basic design elements.

3  Confirm that you want to update the file or image references in the copy of the template page. Click OK.

From now on, any child, sibling, or parent you create from the new page using its live buttons is an exact copy of the template.

4  Name the new pages to make them easier to identify. Your settings in the Site View Controller window determine how you can edit the filenames. For more information, see Setting the Site View preferences.

5  In the Files tab ( [image]) of the site window, open the New Pages folder. You will find the new pages with the filenames you have just entered in step 4. If you have not edited the page titles, select each page to have the title displayed in the File Inspector (Page tab). (You can also double-click each page to open it and view the title.)


Linking pages
Adding content to a Web site

Linking pages

Because there are no physical links between the pages at this point, you must open the home page and create hyperlinks to the newly created pages. Each new page “knows” about the navigational links that Adobe GoLive creates as you add pages to the new site. These navigational links form a “to do” list in the Pending tab of the Page Inspector.

Pending link

To change navigational links into physical hyperlinks:

1  Double-click any page icon in the Site tab of the site window.

2  In the document window, click the page icon ( [image]).

3  In the Page Inspector, click the Pending tab to view the list of pending links.

4  In the document window, select text or an image to link from, and click the New Link button in the toolbar. In the context-sensitive Inspector, click the Point and Shoot button ( [image]) and link to the desired file in the Site tab.

The blue pending indicator arrow disappears for the page for which you have just created a link.

5  Repeat steps 4 and 5 until no pending links remain.

6  Go to all other new pages, and repeat steps 1 through 5.

7  When you finish creating hyperlinks, move the new pages out of the New Pages folder or rename the folder.


Adding resources to a site
Building Web Sites

Adding resources to a site

You can import selected resources from the desktop or Internet programs after creating a site. You can import Web pages, images, media files, and even bookmark files or address books from your favorite Web browser. You can import linked PDF files and update the links using the Link Inspector. You can also add color and fonts to your pages.

Note: Whenever you import files, Adobe GoLive duplicates and copies them to the site folder, leaving the original files untouched.

See also:

Importing files

Importing URLs and e-mail addresses


Importing files
Adding resources to a site

Importing files

You can drag resources into your site using the Files tab. You can also import selected resources to your site.

See also:

To add files from the desktop to the site document

To add pages and resources using the Add Files command


To add files from the desktop to the site document
Importing files

To add files from the desktop to the site document:

1  On the desktop, open or locate the folder that contains the desired files.

2  Drag the desired files or folders to the Files tab of the site window. The Files tab displays files and folders differently in Windows and Mac OS. For a description of these differences, see Viewing a site using the Files tab. As you drag, a small plus sign ( [image]) appears next to the pointer.

Adding files to the site document in Windows

Adding files to the site document in Mac OS

3  If the Files tab is not open, you can drag the files to the tab to open it. Do not release the mouse button; wait for the tab to open, and then drag the files into the Files tab.

You can use the same technique when copying files to a closed folder. Folders in the Files tab of the site window open when you hesitate a moment as you drag selected files over the folder.

See also:

To add pages and resources using the Add Files command


To add pages and resources using the Add Files command
Importing files

To add pages and resources using the Add Files command:

Choose Site > Add Files to import HTML pages and other file resources. The dialog box for adding resources to your site looks quite different in Windows and Mac OS. Both allow you to navigate to select the resources you want to add. In Mac OS you can build a preview of an image or show the title frame of a movie. Click Done to import the selected resources.

See also:

To add files from the desktop to the site document


Importing URLs and e-mail addresses
Adding resources to a site

Importing URLs and e-mail addresses

You have several ways of adding external URLs and e-mail addresses to your site.

See also:

To add URLs and e-mail addresses by dragging and dropping

To import a bookmarked URL

To import a bookmark file, address book, or other browser files using the Import File command


To add URLs and e-mail addresses by dragging and dropping
Importing URLs and e-mail addresses

To add URLs and e-mail addresses by dragging and dropping:

1  Open your Web browser.

2  Select a URL or e-mail address in the browser’s window, and drag it to the Adobe GoLive External tab ( [image]).

If the External tab is not open, drag your selection on the External tab, wait for Adobe GoLive to open the External tab window, and then drop the URL or address in the window area.

See also:

To import a bookmarked URL

To import a bookmark file, address book, or other browser files using the Import File command


To import a bookmarked URL
Importing URLs and e-mail addresses

To import a bookmarked URL:

1  Open your Web browser.

2  In the browser window, select a bookmark from the Bookmarks menu.

3  Highlight the URL (in the Netscape Navigator Location text box, for example), and choose Edit > Copy.

4  In Adobe GoLive, open the External tab of the site window ( [image]).

5  Drag a URL icon from the Site tab ( [image]) of the Palette, and drop it in the External tab.

6  Select the name of the generic URL.

7  In the URL text box of the Reference Inspector, double-click to select the http://www.untitled.1 entry, and choose Edit > Paste to overwrite the generic URL in the URL text box. Press Enter.

8  Name the new URL (overwriting the generic Untitled URL name) in the Name text box, and press Enter.

See also:

To add URLs and e-mail addresses by dragging and dropping

To import a bookmark file, address book, or other browser files using the Import File command


To import a bookmark file, address book, or other browser files using the Import File command
Importing URLs and e-mail addresses

To import a bookmark file, address book, or other browser files using the Import File command:

1  Choose Site > Import File.

2  In the dialog box, select a file from the list box. You can import any bookmark file or address book created by Netscape Navigator, and the Favorites file created by Internet Explorer.

3  Click Open, press Enter, or double-click the bookmark file to start importing. Adobe GoLive imports the bookmark file or address book as a URL Group or Address Group.

See also:

To add URLs and e-mail addresses by dragging and dropping

To import a bookmarked URL


Adding color to a Web site
Building Web Sites

Adding color to a Web site

The site window Colors tab provides comprehensive drag-and-drop support for importing and assigning colors. You can collect colors for future use, eliminating the need to retrieve frequently used colors from the various tabs of the Color Palette. Once you have stored a color in the Colors tab of the site window, it is available for instant drag-and-drop coloring.

The colors you collect in your site appear in two places: in the Colors tab of the site window and in the Site tab of the Color Palette. You drag-and-drop a color from either location to a selected object in the document window or to a color field in an Inspector. For more information on using the Color Palette, see Using the Color Palette and Adding color.

See also:

Dragging and dropping colors

Renaming colors

Copying colors within and between Web sites

Finding out where site colors are used


Dragging and dropping colors
Adding color to a Web site

Dragging and dropping colors

You can drag colors from the preview pane of the Color Palette or from selected text in the document window. You can also drag or copy and paste colors from another site window. Whenever you drop a color on the Colors tab, Adobe GoLive checks whether it is Web safe (part of the spectrum of 216 no-dither colors that displays evenly on all platforms and operating systems) and displays this property in its Web Safe column.

Drag a color from the preview pane of the Color Palette to the Colors tab.

To add a color from the Color Palette:

1  Select a color from any tab of the Color Palette—for example, the Web Safe Colors tab ( [image]).

2  Drag the color from the preview pane to the Colors tab ( [image]) of the site window. The color is listed as an untitled color. A small bullet in the Web Safe column indicates that the color is Web safe. The color also appears in the Color Inspector.

3  Type a name in the Colors tab of the site window or in the Color Inspector, and press Enter. The color is renamed in the colors list.

To import a color from a Web page:

Select colored text in the document window, and drag the selection to the Colors tab. The color of the text is added to the list. If you select text with several color assignments, Adobe GoLive adds all colors in the selection to the list.

To add a new Color object from the Palette to the colors list:

Drag a new Color object from the Site tab ( [image]) of the Palette to the color list in the Color tab of the site window, name it, and then drag the color from the preview pane of the Color Palette to the color field in the Color Inspector or in the colors list.


Renaming colors
Adding color to a Web site

Renaming colors

You can rename a color in the Colors tab or in the Color Inspector.


Copying colors within and between Web sites
Adding color to a Web site

Copying colors within and between Web sites

You can extract colors assigned to objects on pages and list them in the Colors tab of the site window.

To copy (extract) colors used within a site:

1  In the Colors tab ( [image]) of the site window, choose Site > Get Colors Used. A New Colors folder is created in the Colors tab.

2  Open the New Colors folder to view its contents. The folder contains a listing of “untitled colors”—the colors that your site uses.

3  Click any color and rename it.

This can also be done using the Site > Clear Site command, as described in Cleaning up the site folder.

To copy colors between sites:

1  Open the source and destination site documents.

2  In the source site, select one or more colors from the Colors tab of the site window.

3  Drag your selection to the Colors tab of the destination site. If the tab is not open, drag to the tab first, wait for it to open, and then drag to the window area.


Finding out where site colors are used
Adding color to a Web site

Finding out where site colors are used

The Link Inspector lets you find out where the colors listed in the Colors tab of the site window are used.

To inspect the colors used in your site:

1  Select the color in the Colors tab ( [image]) of the site window.

2  Click the Open Link Inspector button ( [image]) in the site toolbar to open the Link Inspector. The Link Inspector displays the pages on which the selected color is used.


Adding font sets to the site window
Building Web Sites

Adding font sets to the site window

You can collect font sets in Fontsets tab of the Adobe GoLive site window for later use throughout your site. You can add new font sets either by dragging font set formatted text from the document window or from another site window. After you store a font set in the Fontsets tab, it can be dragged to selected text in a document window.

When the site window is open, any font sets stored in the Fontsets tab appear in the Style menu. To format selected text, choose the desired font set from the font set list at the end of the Fonts submenu.

Note: Font sets instruct the browser to use custom fonts for building the page display. If the fonts in the font set are not installed, the browser uses its own font preferences. For more information on font sets, see Choosing a font set.

To add a font set to the Fontsets tab:

1  In the document window, select text formatted with a font set.

2  Drag the text to the Fontsets tab ( [image]) of the site window. The font set is listed as an untitled font set.

3  Type a name in the Font Set Inspector, and press Enter. The font set is renamed in the font set list.

To add a font set using the Site tab of the Palette:

Drag a New Font Set icon from the Site tab of the Palette to the font set list, name it in the Font Set Inspector, and then add fonts as described above.

To edit a font set in the Fontsets tab of the site window:

1  Select a font set in the Fontsets tab ( [image]).

2  Select New in the Font Set Inspector. Select a font from the pop-up menu, and press Enter to add the font to the current font set.

See also:

Copying font sets between Web sites

Finding out where font sets are used


Copying font sets between Web sites
Adding font sets to the site window

Copying font sets between Web sites

You can copy font sets from one site to another by dragging the font set from one Fontsets tab of the site window to another.

To copy font sets between Web sites:

1  Open the source and destination site documents.

2  In the source site, select one or more font sets from the Fontsets tab of the site window.

3  Drag your selection to the Fontsets folder of the destination site window. If the tab is not open, drag to the tab first, wait for it to open, and then drag to the main window area.


Finding out where font sets are used
Adding font sets to the site window

Finding out where font sets are used

The Link Inspector shows you where the font sets listed in the Fontset tab of the site window are used.

To inspect the font sets used in your site:

1  Select the font set from the Fontsets tab ( [image]) of the site window.

2  Click the Open Link Inspector button ( [image]) in the site toolbar to open the Link Inspector. The Link Inspector displays the pages where the selected font sets are used.

The Link Inspector displays the pages the selected font sets are used in.


Inspecting links in the site
Building Web Sites

  Inspecting links in the site

The Site tab uses a set of arrows and graphical symbols to display physical links between pages in your site. You can click the ends and tips of the links to go to the sources and destinations of hyperlinks.

•   A forward link is a vertical link between a parent and a child. Forward links are displayed as vertical arrows, with a bullet at the bottom of the source page and an arrow tip pointing at the top of the destination page.

A. The tip of a forward link is selectable. B. Forward links appear as vertical arrows. C. The origin of a forward link is selectable.

•   A backward link, also referred to as a side-knot, is a horizontal or vertical link between siblings or between a child and a parent.

Two different symbols display a backward link:

The Incoming Link symbol ( [image]) indicates a referenced page; that is, a page used as the destination of a link.

The Outgoing Link symbol ( [image]) indicates a referencing page; that is, the page that contains the source of a link.

See also:

To inspect a forward or backward link

To follow links and view the pages and the resources they use

Customizing the Link Inspector

Editing hyperlinks and file references


To inspect a forward or backward link
Inspecting links in the site

To inspect a forward or backward link:

1  In the Site tab of the site window, click on the page icon whose links you want to inspect.

2  Choose Edit > Link Inspector, and view the forward and backward links for the selected page.

3  With a zoom factor of 50% or more, do one of the following:

•   Move the pointer over the arrow tip at the top of a page icon or over the bullet at the bottom of a page icon. This highlights the origin or destination of the link, changing its color (blue is the default color). Click to open the Link Inspector, which shows all pages, images, and media files referenced by this page, plus other pages that reference the page itself.

Inspecting the home page in the Link Inspector

•   Move the pointer over the Incoming Link symbol to the left of a page to highlight the outgoing links of the source pages. Move the pointer over the Outgoing Link symbol to the right of a page to highlight the corresponding incoming links of the destination pages. Click either link symbol to display the Link Inspector for that page.

Inspecting outgoing links in the Link Inspector

See also:

To follow links and view the pages and the resources they use

Customizing the Link Inspector

Editing hyperlinks and file references


To follow links and view the pages and the resources they use
Inspecting links in the site

To follow links and view the pages and the resources they use:

1  Click the icon of the page or resource you wish to inspect. Adobe GoLive updates the display in the Link Inspector window. The page or resource you choose becomes the current selection and is indicated by a large icon.

Viewing a resource in the Link Inspector

2  Click other icons to view more pages and resources.

See also:

To inspect a forward or backward link

Customizing the Link Inspector

Editing hyperlinks and file references


Customizing the Link Inspector
Inspecting links in the site

Customizing the Link Inspector

You can set display options for the Link Inspector in the Link View Controller.

To show or hide a class of objects:

1  Click the eye icon ( [image]) in the upper right corner of the Link Inspector window to open the Link View Controller.

2  Select the desired viewing options for links and classes of objects.

3  Select Icon Instead of Thumbnail to turn thumbnail previewing off.

Viewing referenced pages in the Link Inspector with HTML files and thumbnail previewing active.


Editing hyperlinks and file references
Inspecting links in the site

Editing hyperlinks and file references

You can use one of two methods to update hyperlinks and file references:

•   The Link Inspector allows you to use the point and shoot feature to update all hyperlinks and references pointing to a particular Web page or resource file. This feature is particularly useful if you need to exchange design elements that are repeated in all pages throughout your site or a Web page referenced by many other Web pages.

•   The Change All References button ( [image]) in the site toolbar and the equivalent Site > Change References command let you edit a hyperlink or file reference everywhere throughout your site. For example, you can use this command to replace a background image without opening a single page. The Change All References command also lets you replace a page that is the target of multiple hyperlinks without opening each source page and rearranging the link using the point and shoot feature.

Exchanging a background image throughout a site from within the Link Inspector

Important: This is a very powerful feature that must be used with care. For example, when you exchange images or other media items, make sure that the new image or media item has exactly the same size and width-to-height proportions as the one you want to replace, or else it may be distorted.

See also:

To edit hyperlinks and file references from within the Link Inspector

To edit a hyperlink or file reference with the Change All References command


To edit hyperlinks and file references from within the Link Inspector
Editing hyperlinks and file references

To edit hyperlinks and file references from within the Link Inspector:

1  Select the page, image, or media file you want to replace within your site.

2  Drag from the Point and Shoot button ( [image]) next to the file icon in the Link Inspector window to the new item in the left pane of the Files tab.

If the Files tab is not open, drag to its tab, wait for the Files tab to open, and then drag to the new file. The interconnecting line blinks to indicate a link has been made.

3  Confirm that you want to update all hyperlinks or file references affected by this action. (Deselect any files you don’t want updated.) Click OK. In the Link Inspector, the replaced file appears as a solitary icon, with all its links removed.

See also:

To edit a hyperlink or file reference with the Change All References command


To edit a hyperlink or file reference with the Change All References command
Editing hyperlinks and file references

To edit a hyperlink or file reference with the Change All References command:

1  In the site window, select the page, image, or media file to be replaced throughout your site.

2  Click the Change All References button ( [image]) in the site toolbar.

3  The Change References dialog box displays the name of the file to be replaced in the Change All References To text box.

4  Drag from the Point and Shoot button ( [image]) below the Into References To text box to the resource you want to use to replace the existing resource.

5  Release the mouse button.

6  In the Change Reference dialog box, confirm that you want Adobe GoLive to update all hyperlinks or file references affected by this action. (Deselect any file you don’t want updated.) Click OK.

7  Double-click any page to preview the change.

See also:

To edit hyperlinks and file references from within the Link Inspector


Managing Web Sites

•   It functions like a window on your hard disk, eliminating the need to switch back to the desktop to view your files and folders. It allows you to move files by dragging them to other folders, to delete files by dragging them to the Recycle Bin or Trash, and to rename files by clicking the filename.

•   It lets you create hyperlinks visually using the point and shoot feature. You simply locate the target of a link in the site window and drag from the source in the document window or the source’s Inspector to that item.

•   It features a link parser that not only checks the integrity of your hyperlinks and alerts you to potential problems, but also ensures that all links and references are updated when you move a file to another folder. The link parser monitors HTML pages, as well as links in Adobe Acrobat PDF files, HREF tracks in QuickTime movies, and URLs in Macromedia Flash Shockwave files.

•   It identifies files outside of the site folder (orphan files).

•   It lets you store nonfile objects, such as URLs, e-mail addresses, colors, and font sets, for later use in your site.

•   It lets you open multiple site windows, allowing you to copy resources from previous projects with drag-and-drop ease.

•   It lets you add graphics to a page by simply dragging from a site window to the page.

See also:

Using the site toolbar

Managing files

Managing URLs and e-mail addresses

Managing objects using the File Inspector

Managing stationery in the site window

Maintaining site integrity

Setting up absolute paths

Using version 2.0 Project files (Mac OS)

Uploading and downloading your Web site

Setting up distributed Web sites

Publishing your Web site

Setting advanced preferences and options


Using the site toolbar
Managing Web Sites

Using the site toolbar

The site toolbar offers a variety of tools for Web site viewing, for file and folder management, and for FTP access to Web servers. For information on toolbar buttons available for performing tasks in the Files tab and from the FTP tab, see Using the site toolbar.


Managing files
Managing Web Sites

Managing files

The Adobe GoLive site management tool—the site window—is tightly integrated with the desktop, allowing you to perform many file management tasks exactly as you would in your system interface. It allows you to monitor the integrity of hyperlinks between pages and references to images and media files, prompting you to update all file references whenever you change the underlying structure of your site from the site window. Because the site window relies on your operating system’s file management capabilities, the site window looks somewhat different on various versions of Windows and Macintosh operating systems.

See also:

Opening files

Mapping file extensions (Mac OS)

Creating folders and groups


Opening files
Managing files

Opening files

The site window lets you open Web pages by double-clicking. You can open any file with the proper filename extension, if the native application is installed on your hard disk and you have specified the correct file mapping preferences in the Adobe GoLive General Preferences dialog box.

To open a non-HTML file by double-clicking:

Do one of the following in the site window:

•   To open a file without a filename extension and created with an unknown application, double-click the file to open Mac OS EasyOpen (Mac OS), if activated, or the Open With dialog box (Windows). Choose an external application to open the file.

•   To open a file created with a known application (Mac OS) or file extension (Windows), double-click to open the file in its creator application.

•   To open a file with a filename extension but created with an unknown application (Mac OS), double-click the file. If you specified an application for the filename extension in the File Mapping dialog box, double-clicking opens the file in that application.


Mapping file extensions (Mac OS)
Managing files

Mapping file extensions (Mac OS)

You can use file mapping preferences from various sources:

•   You can use the Adobe GoLive default file mappings.

•   You can specify your own file mapping preferences.

To specify File Mapping preferences:

1  Choose Edit > Preferences, and expand the General icon in the left pane of the Preferences dialog box. Click the File Mapping icon.

2  Select Enable File Open in Other Applications.

3  In Mac OS, select Internet Config. if you want the Internet Config. file mappings to override your custom preferences.

4  To specify your own mapping preferences, choose a file format from the list. The current settings appear in the Suffix, MIME Type, and Kind text boxes. Choose Browse from the pop-up menu next to the filename extension text box. Select the desired application in the subsequent file selection dialog box.

5  Click OK, and check the newly specified file mapping preferences.

Note: In Mac OS, your custom preferences may be overwritten if you merge them with preferences from Internet Config and two items refer to the same filename extension.


Creating folders and groups
Managing files

Creating folders and groups

Arranging your files in separate folders and your nonfile objects in groups provides a convenient way of reducing clutter in your site. Create one folder or group for each class of objects. To view the auxiliary material needed to build and maintain a site, you expand the Files tab of the site window. For moreinformation, see Viewing a site using the Files tab.

See also:

To create a folder

To drag a file into another folder

To duplicate a file or folder

To delete a file or folder

To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash


To create a folder
Creating folders and groups

To create a folder:

1  In the Files tab ( [image]) of the site window, select a location for the folder in the folder list, and do one of the following:

•   Click the New Folder button ( [image]) in the site toolbar.

•   Choose Site > New > Group.

•   Drag the Folder icon from the Site tab ( [image]) of the Palette, and drop it in the files list in the Files tab.

2  Type a folder name in the Name text box of the Folder Inspector, and press Enter. Or rename the folder in the site window.

3  Choose an option from the Publish pop-up menu of the Folder Inspector if you want to have the folder included in the published version of the site when you use the Export Site command. The option If Not Empty publishes the folder if it contains at least one file. (The Export Site command is not commonly used in later versions of Adobe GoLive.)

4  Drag the desired files into the folder.

See also:

To drag a file into another folder

To duplicate a file or folder

To delete a file or folder

To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash


To drag a file into another folder
Creating folders and groups

To drag a file into another folder:

1  Drag the file to another folder. If you want to see the contents of the target folder, wait until the folder pops open before releasing the file.

2  Click OK to update hyperlinks and file references. All files that are affected by the move are listed in this Move Files dialog box.

3  View the result in the site window. The files should have been moved to the desired location. All hyperlinks and file references should be intact, so there should be no error icons.

Note: If you selected options in the Move Files dialog box to exclude selected files from updating, broken links and invalid file references may result.

See also:

To create a folder

To duplicate a file or folder

To delete a file or folder

To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash


To duplicate a file or folder
Creating folders and groups

To duplicate a file or folder:

1  Select the item or items to be duplicated in the Files tab of the site window.

2  Choose Edit > Duplicate, or press Ctrl-D (Windows) or Command-D (Mac OS).

3  A copy of the duplicated item appears in the site window.

See also:

To create a folder

To drag a file into another folder

To delete a file or folder

To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash


To delete a file or folder
Creating folders and groups

To delete a file or folder:

1  Set the location to which the file is moved in the Site preferences. (See Setting the Site preferences.)

2  Select the item or items you want to remove in the Files tab of the site window.

3  Do one of the following:

•   Click the Delete Selected Item button( [image]) in the toolbar.

•   Press Delete (Windows) or Command-Delete (Mac OS).

•   Drag the selection to the Trash (Mac OS).

4  When prompted to confirm the deletion, click Move.

See also:

To create a folder

To drag a file into another folder

To duplicate a file or folder

To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash


To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash
Creating folders and groups

To recover a file from the Site Trash or to move a file to the Recycle Bin or Trash:

1  If necessary, expand the site window to show the auxiliary folders, and click the Extra tab.

2  Select and view the Site Trash folder, and do one of the following:

•   To undo a deletion, drag the file you want to recover back to its previous location in the files list in the site window.

•   To move files to the Recycle Bin or Trash, select an item to be deleted in the Site Trash folder, and then click Delete Selected Item ( [image]) in the toolbar, press Command-Delete (Mac OS), or drag the selection to the Recycle Bin or Desktop Trash.

See also:

To create a folder

To drag a file into another folder

To duplicate a file or folder

To delete a file or folder


Managing URLs and e-mail addresses
Managing Web Sites

Managing URLs and e-mail addresses

You can use the Reference Inspector to inspect and edit the names and content of nonfile or newly inserted objects in the site window. Nonfile objects include Universal Resource Locators (URLs) and e-mail addresses stored in the External tab of the site window Files tab.

The External tab supports mailto: hyperlinks with multiple e-mail addresses. Adobe GoLive automatically adds the “Mailto:” prefix to a list of addresses if Autoadd “Mailto:” to Addresses is selected in the URL Handling General preferences.

To edit the name and content of a URL or e-mail address:

1  Drag a URL or Address icon from the Site tab of the Palette into the External tab of the site window, or select an existing URL or address in the External tab of the site window.

A. URL icon B. Address icon

2  Select the URL or address in the site window, and type the object name in the Name text box in the Inspector or in the list in the External tab. Press Enter.

3  Edit the URL or address in the Inspector or in the External tab list to change the resource locator or address. Press Enter.

4  Click Edit to update all files in your site that contain the URL or e-mail address you have just changed.

See also:

Extracting URLs and e-mail addresses from Web pages

Tracking URLs and e-mail addresses


Extracting URLs and e-mail addresses from Web pages
Managing URLs and e-mail addresses

Extracting URLs and e-mail addresses from Web pages

The site window provides a convenient shortcut for extracting nonfile objects from the pages listed in the Files tab.

To extract a URL or e-mail address:

1  Click the External tab in the site window.

2  Choose Site > Get References Used.

3  Two new folders, New Addresses and New URLs, are placed in the External tab if e-mail addresses and URLs are present on the pages in your site. Each folder contains a listing of URLs and e-mail addresses used in your site (if any).

You can also do this by choosing the Site > Clear Site command. For more information, see Cleaning up the site folder.


Tracking URLs and e-mail addresses
Managing URLs and e-mail addresses

Tracking URLs and e-mail addresses

The Link Inspector lets you determine on which pages URLs and e-mail addresses listed in the External tab of the site window are used.

To determine which page or pages a URL or e-mail address is used on:

1  Select the desired URL or e-mail address in the External tab ( [image]) of the site window.

2  Click the Open Link Inspector button ( [image]) in the site toolbar.

The Link Inspector displays the pages that contain the selected URL or e-mail address.


Managing objects using the File Inspector
Managing Web Sites

Managing objects using the File Inspector

The File Inspector helps you manage the objects used in your Web site. Depending on what type of object you select in the site window, the context-sensitive File Inspector lets you view either the object status and desktop-related information, or the content of Web pages, image files, and media files.

See also:

Inspecting Web pages

Inspecting images and media files

Dragging and dropping previewed images

Renaming files


Inspecting Web pages
Managing objects using the File Inspector

Inspecting Web pages

You can use the Page, File, and Content tabs of the File Inspector to obtain HTML-specific and desktop-related file information and to view the content of a Web page.

See also:

To view HTML-specific file information

To set filename and stationery status


To view HTML-specific file information
Inspecting Web pages

To view HTML-specific file information:

1  In the Files tab of the site window, select a Web page (HTML page).

2  Click the Page tab in the File Inspector. You can view or change the following options:

•   Title gives the title of the HTML page, as entered in the head section of the document and displayed in the title bar of the browser.

•   Encodings shows the encoding meta information contained in the head section of the page.

•   The Status pop-up menu lets you select a user-defined status for the current page. This is useful if other people, such as authors, are handling your site. The Page Status Site preferences define the publishing statuses. For more information, see Setting Site Page Status preferences.

•   The Home Page option, if grayed out and selected, indicates that the current page is the home page of your site. A home page is usually in place when you import an existing site or create a new site from scratch. (If you want to restructure your site, you can select another page and then select this option to make that page your home page.)

See also:

To set filename and stationery status


To set filename and stationery status
Inspecting Web pages

To set filename and stationery status:

1  In the Files tab of the site window, select the Web page (HTML page), and click the File tab of the File Inspector.

2  Set the following options:

•   Type in a new filename in the Name text box, if desired, and press Enter. For example, if your webmaster asks you to use another name for the home page, you can use this text box to overwrite the default index.html filename.

•   Select Stationery if you want to use the file as a template for other pages (Mac OS). This option is selected automatically if you drag a file to the Extra tab in the site window. For more information, see Managing stationery in the site window.

•   Choose an option from the Publish pop-up menu to specify a condition for publishing the file when the Export Site command is used. For more information, see Exporting your Web site.

3  Edit file-related information. In Mac OS, you can edit Type and Creator text boxes and choose a Finder label from the Label pop-up menu. In the site window the page assumes the color associated with the Finder label.

The File tab also displays the date and time when the current file was first saved and last saved and the amount of disk space (in KB) it occupies on your hard disk.

To preview an HTML page (Mac OS):

In the Files tab of the site window, select the Web page (HTML page). Click the Content tab of the File Inspector.

The Content tab shows a full-page preview of the HTML page.

See also:

To view HTML-specific file information


Inspecting images and media files
Managing objects using the File Inspector

Inspecting images and media files

You can use the File and Content tabs of the File Inspector to obtain detailed information about a particular image or media file and to preview its content.

Adobe GoLive can display and play back various image and media file formats, without the corresponding plug-in being present in the Plugins folder. Native support is provided for the following file formats:

•   GIF (static and animated), JPEG (including Progressive JPEG), and PNG

•   QuickTime and QuickTime VR movies

•   3DMF graphics (QuickDraw3D)

QuickTime movies and QuickDraw3D graphics display with typical playback and navigation controls, such as Play buttons.

To view file information and edit desktop-related settings:

1  In the Files tab of the site window, select an image or media file, and click the File tab of the File Inspector.

2  You can edit the same settings as for HTML pages, including renaming, setting the Publish status, and choosing a label color. For more information, see the procedure for setting filename and stationery status in Inspecting Web pages.

To preview an image or a media file:

1  In the Files tab of the site window, select an image or media file, and click the Content tab of the File Inspector.

If a media file cannot be previewed, the required multimedia plug-in may be missing in the Plugins folder in your Adobe GoLive program folder. To add the missing multimedia extension, copy the plug-in file from the Plugins folder of your Web browser to the Plugins folder in the Adobe GoLive program folder, and then restart Adobe GoLive.


Dragging and dropping previewed images
Managing objects using the File Inspector

Dragging and dropping previewed images

Images inspected in the Content tab of the File Inspector can be dragged directly to the document window.

Importing an image from the File Inspector


Renaming files
Managing objects using the File Inspector

Renaming files

When you rename a file object (image, media file, etc.) in the site window, Adobe GoLive renames the physical file on the desktop and lets you immediately update all references to that file to ensure that your links remain intact.

To rename a file:

1  In the Files tab of the site window, select a file object.

2  Edit the file object name in the File tab of the File Inspector, and press Enter.

3  In the Rename File dialog box, confirm that you want Adobe GoLive to update all references.

You can also rename any file in the Files tab of the site window by selecting the file, typing in a new name, and pressing Enter.

4  Click Update in the toolbar to update all affected links and file references in your site.

Note: If you do not select Update, you may have to hand-repair each link affected by the new filename.


Managing stationery in the site window
Managing Web Sites

Managing stationery in the site window

To keep the layout of your pages consistent when you are designing a site, Adobe GoLive lets you manage stationery at the site level using a dedicated tab in the site window and in the Palette.

You can create stationery by dragging a page from the desktop or from the files listed in the Files tab of the site window. In addition to standard stationery, Adobe GoLive also lets you manage pages that you want to use in dynamic components. For more information, see Saving pages.

You can view the stationery properties in the File tab of the File Inspector. In Mac OS, you can also use the Finder Get Info command. In Windows, you can right-click a file and use the Properties command.

To convert an existing page to stationery:

1  Prepare the page you want to use as stationery in Layout view in the document window, and save it to disk (preferably in your root site folder, so that it appears in the site window). Locate the page you want to use as stationery on the desktop or in the list in the Files tab of the site window.

2  If necessary expand the site window to show the auxiliary folders, and click the Extra tab. (For more information, see Viewing a site using the Files tab.

3  Ctrl+drag (Windows) or option-click (Mac OS) and drag the file to the Extra tab to copy it. If the Extra tab is not open, drag to the tab first, wait for the tab to open, and then drag to the main window area.

4  Drop the file in the Stationeries folder. Adobe GoLive automatically converts the file to stationery and copies it to the Stationeries folder within the auxiliary SiteName.data folder, which is at the same level as the site folder holding the contents of your site. Also, the stationery appears in the Site Extras tab of the Palette.


Maintaining site integrity
Managing Web Sites

Maintaining site integrity

Adobe GoLive continuously monitors the integrity of your site and alerts you to broken links, lost resources, or other errors that may be caused, for example, by moving files on your desktop or importing an existing site that has its resources outside the root site folder.

The Status column of the Files tab in the site window indicates the nature of any errors:

•   The check mark icon ( [image]) indicates this file is error-free; that is, all referenced files have been found.

•   The “bug” error icon ( [image]) indicates that there are broken links in the Web page.

•   The “stop” icon ( [image]) indicates that the object has lost its connection with the physical file.

•   The question mark icon ( [image]) indicates that the physical file couldn’t be found.

•   The orphan file icon ( [image]) indicates a referenced file stored outside the root site folder.

•   The alert icon ( [image]) indicates an empty page.

See also:

Finding missing files

Repairing broken links and invalid file references

Cleaning up the site folder

Using the context menu to troubleshoot missing files (Mac OS)

Checking external URLs


Finding missing files
Maintaining site integrity

Finding missing files

If you see error icons at the top of the site window or in the Status column of the Files tab, analyze and repair them before uploading your site to the Web.

To inspect your site for errors:

1  If necessary expand the site window to show the auxiliary folders, and click the Errors tab. For more information, see Viewing a site using the Files tab.

2  Check the Errors tab for a detailed description of the problem. The entries listed under the Missing files category indicate which files (referenced by your site) couldn’t be found.

3  In the files list in the site window, determine which error icons are displayed for a particular file.

The URL column of the Errors tab indicates where the missing referenced file was located and gives its directory path.

4  Select a file icon in the Errors tab, and then click the Open Link Inspector button ( [image]) in the site toolbar to repair the links and references.


Repairing broken links and invalid file references
Maintaining site integrity

Repairing broken links and invalid file references

When the Errors tab of the site window displays an error, it is likely that someone has moved, deleted, or renamed a file that your site references.

See also:

To troubleshoot a broken link at the page level

To troubleshoot a renamed file at the site level

To troubleshoot a missing file at the site level


To troubleshoot a broken link at the page level
Repairing broken links and invalid file references

To troubleshoot a broken link at the page level:

1  In the site window, double-click a page displayed with a “bug” error icon in the Status column.

2  Locate missing objects in the page display—for example, image placeholders appears where an image used to be.

3  Click the Link Warnings button ( [image]) in the toolbar.

4  Look for objects or text with a red border.

5  Select an object or text, and inspect its hyperlink or file reference in the URL text box of the Inspector.

6  Reestablish the hyperlink or file reference using the point and shoot feature, for example.

7  When all links are reestablished, the Errors tab is blank and the error icons disappear from the top of the site window. For more information, see Setting link warnings.

See also:

To troubleshoot a renamed file at the site level

To troubleshoot a missing file at the site level


To troubleshoot a renamed file at the site level
Repairing broken links and invalid file references

To troubleshoot a renamed file at the site level:

1  Select a missing file object in the Errors tab of the site window.

2  Click the Open Link Inspector button ( [image]) in the site toolbar.

3  The Link Inspector indicates which pages have referenced that file before.

4  Locate the renamed file in the Files tab of the site window.

5  Drag from the Point and Shoot button ( [image]) next to the missing file icon in the Link Inspector to the icon of the renamed file in the Files tab.

Repairing renamed file in Windows

Repairing renamed file in Mac OS

6  In the Change Reference dialog box, click OK to confirm that you want to update the hyperlink or file reference you are about to repair.

See also:

To troubleshoot a broken link at the page level

To troubleshoot a missing file at the site level


To troubleshoot a missing file at the site level
Repairing broken links and invalid file references

To troubleshoot a missing file at the site level:

1  Click the Open Link Inspector button ( [image]) in the site toolbar, and use the Link Inspector to determine which pages have referenced that file before.

2  Check the URL column of the Errors tab to discover where the missing file was located.

3  Locate the missing file.

4  When you find the file, drag it back to its original location in the Files tab.

5  In the Change Reference dialog box, click OK to confirm that you want to update the hyperlinks or file references you are about to repair.

To resolve orphan files:

Do one of the following:

•   Drag the orphan file from the Errors tab of the site window to the Files tab. (This copies the file rather than moves it.)

•   Choose Site > Clear Site to automatically copy orphan files to the New Files folder in the root site folder.

See also:

To troubleshoot a broken link at the page level

To troubleshoot a renamed file at the site level


Cleaning up the site folder
Maintaining site integrity

Cleaning up the site folder

To keep the site folder clear of files that don’t belong in it because they are not referenced by any page in the site, call a cleanup routine that prompts you to specify which copy and delete operations should be performed.

See also:

To clear your site folder

To set the Clear Site command preferences


To clear your site folder
Cleaning up the site folder

To clear your site folder:

1  Choose Site > Clear Site.

2  In the Clear Site dialog box, select Rescan Root Folder to rescan the site folder and update the file list.

3  Select the required options in the Add Used group:

•   Files copies all external files that are referenced by pages within your site to the site folder.

•   Show List of Files to Copy shows which files are added.

•   External References, Colors, and Fontsets scans all pages within your site for URLs, e-mail addresses, colors, and font sets and lists them in the appropriate tabs of the site window.

4  Select the required options in the Remove Unused group:

•   Files moves all files not referenced in your site to the Site Trash, Recycle Bin, or Desktop Trash.

•   Show List of Files to Remove shows which files are removed.

•   External References, Colors, and Fontsets removes all URLs, e-mail addresses, colors, and font sets stored but not used in your site.

Important: Deleting nonfile objects, such as URLs, e-mail addresses, colors, and font sets, removes them without any recovery option.

5  Select Don’t Show Again to hide the Clear Site dialog box. (To undo this option, choose Site > Settings, and click the Clear Site icon ( [image]) in the left pane of the Site Settings dialog box. Select Show Options.)

6  Click Set as Default to use the current settings as the default and to copy these settings to the Clear Site pane of the Site Settings dialog box.

7  Click OK. You are prompted to confirm that you want to copy and/or remove files and nonfile objects. Click OK to clear your site.

See also:

To set the Clear Site command preferences


To set the Clear Site command preferences
Cleaning up the site folder

To set the Clear Site command preferences:

1  Click the Site Settings button ( [image]) in the site toolbar, and then click the Clear Site icon in the left pane of the Site Settings dialog box.

2  Set your preferences using the options described in the procedure about clearing your site folder.

3  Select Show Options Dialog if you want to display the Clear Site dialog box every time you choose the Site > Clear Site command. This will undo the Don’t Show Again selection in the Clear Site Options dialog box.

4  Click OK.

See also:

To clear your site folder


Using the context menu to troubleshoot missing files (Mac OS)
Maintaining site integrity

Using the context menu to troubleshoot missing files (Mac OS)

A Find shortcut is available on a context menu that appears when you Control-click a missing file item in the Errors tab of the site window.

Choose Find from the context menu to open the Find dialog box.

The Find option opens a Find dialog box with the Find File tab in the front and the filename already entered in the Find text box. Click the Find button to search the site folder for the missing file.


Checking external URLs
Maintaining site integrity

Checking external URLs

A nonspecific error message may occur if you reference external URLs in your site. If you set your site preferences to check external URLs, two situations may produce a “bug” icon ( [image]) at the top of the site window but no specific entry in the Errors tab:

•   You are working without permanent online access to the Web, but you have the Check External URLs option selected in the Site Preferences dialog box.

•   You are working with permanent online access to the Web and you have the Check external URLs option active, but the URL is invalid. You should check the URL and correct it in the page that contains the reference. If the URL is referenced in multiple pages, it is easier to correct the URL in the Extra tab of the site window.


Setting up absolute paths
Managing Web Sites

Setting up absolute paths

Adobe GoLive lets you decide whether the path specifications within URLs that reference other items in subfolders of the site folder should be relative or absolute. This allows you to specify paths relative to the root site folder. It also lets Adobe GoLive import sites that use absolute URLs without generating multiple error messages. Absolute paths are recommended in the following cases:

•   If a form references a CGI script at the root level of the site directory (or any other subdirectory), any references to that file are usually written as absolute.

•   If a common navigation bar is used on many pages that reside in folders at various hierarchy levels, you can use an absolute path specification throughout to reference its image files, allowing you to copy and paste the same HTML snippet onto all the pages.

Example: The page \root\pages\info\page.html contains the image \root\images\image.gif, where root is the name of the site folder you specify when you save the site for the first time.

By default, the URL in the referencing HTML page isn’t aware of the presence of the root folder. This is reflected by the up one folder level notation—two periods, followed by a slash (..\).

If you use relative paths, the path specification reads:

..\..\images\image.gif

This instructs the browser to go up two folder levels to locate the image file in the folder images.

If you use absolute paths, Adobe GoLive omits the up one folder level notation. This works only when the site is served by a Web server application, because the browser depends on the root directory information supplied by the server.

The absolute path specification would read:

\images\image.gif

This instructs the browser to locate the image file in the subfolder images within the root folder specified by the Web server.

Note: Using absolute paths limits your previewing options. Pages aren’t displayed properly when you choose the Show In Browser command to launch a Web browser for previewing. The browser reads the pages directly from the hard disk and would need a Web server application to supply it with information on the root directory and assist it in resolving the URLs.

See also:

Specifying absolute paths for referenced files

Setting up Adobe GoLive to use absolute paths


Specifying absolute paths for referenced files
Setting up absolute paths

Specifying absolute paths for referenced files

Adobe GoLive gives you two options for using absolute paths. You can use absolute paths for any new link or file reference you create throughout the application in the URL Handling General Preferences dialog box. Or you can set the absolute path option for individual links or file references.

As soon as you select Absolute, the up one level notations disappear from the Source text box. The reference to the image file is now absolute.

The Absolute option is turned off when you select a URL pointing at an external destination or an item that maintains a link across volumes.


Setting up Adobe GoLive to use absolute paths
Setting up absolute paths

Setting up Adobe GoLive to use absolute paths

You can set up Adobe GoLive to use absolute paths in the General URL Handling Preferences dialog box by selecting Make New Links Absolute.


Using version 2.0 Project files (Mac OS)
Managing Web Sites

Using version 2.0 Project files (Mac OS)

The Site module in Adobe GoLive represents a significant redesign and enhancement to the Project module in version 2.0. The site structure of Adobe GoLive 4.0 requires that one root folder (with an unlimited number of subfolders) contain all files, whereas a version 2.0 Project site was allowed to contain aliases to files that could be anywhere on your hard disk.

You can create a new site using your version 2.0 Project files, by choosing File > New Site > Import from Folder command to import the files into Adobe GoLive 4.0. Adobe GoLive displays the contents of your site directory in a new site window in the Files tab. The name of your home page appears in boldface type.

Version 3.0 Project Files can be updated rather than imported.

See also:

Importing version 2.0 sites

Updating version 3.0 Project files


Importing version 2.0 sites
Using version 2.0 Project files (Mac OS)

Importing version 2.0 sites

You can import version 2.0 folders if all your site files are contained within one folder. If all your files are not contained in one folder, you should first publish your site to update the file structure.

To publish your Web site using version 2.0:

1  Start the version 2.0 application.

2  Publish your site using any of the three site structure options: Flat, Separate Pages and Media (recommended), or As in Project.

3  Close the version 2.0 application, and note the location of your newly published site directory.

To import version 2.0 Project files:

1  Start Adobe GoLive 4.0, and choose File > Import from Folder.

2  In the Import Site Folder dialog box, click Browse, and select the existing site folder of the published site for which you want to create a new site.

3  Select the home page of the existing site from your published site directory.

4  Click Import.

5  To import any external URLs, mail-to addresses, colors, or font sets used for this site, import the project file (projectname.π). In the External tab, select Site > Import File.

6  Select your project file. Adobe GoLive adds it to your site window.


Updating version 3.0 Project files
Using version 2.0 Project files (Mac OS)

Updating version 3.0 Project files

When you update your version 3.0 Project files, all nonfile items, such as URLs, mail-to addresses, colors, and font sets, become part of the new site.

To update version 3.0 Project files:

1  Start Adobe GoLive, and choose File > Open. Select the Project file for the site you wish to update.

2  Click Update in the alert box. (A backup copy of the original Project file is saved as projectnameπ.old.)

3  Select the root folder of your Project, and select the home page of your project. The site folder must contain all the referenced files for your Web site. Any referenced files located outside of the root folder appear as errors in the site window.

4  Click Update ( [image]) in the site toolbar.


Uploading and downloading your Web site
Managing Web Sites

Uploading and downloading your Web site

You can upload your site to your own Web server or to a dedicated directory set aside for you on your ISP’s server.

Adobe GoLive has two FTP tools: the built-in FTP tool, which is integrated in the site window, and the stand-alone FTP Upload & Download window. You can also prepare your site for publishing using the Export Site command.

See also:

Uploading your Web site using the built-in FTP tool

Setting up FTP access

Connecting to FTP servers

Uploading your Web site

Downloading files

Using the FTP Upload/Download window

Using the Web Download command (Mac OS)

Setting FTP preferences

Setting FTP Server Network preferences

Assigning an application to downloaded files

Exporting your Web site


Uploading your Web site using the built-in FTP tool
Uploading and downloading your Web site

Uploading your Web site using the built-in FTP tool

The built-in FTP tool gives you a variety of options for accessing FTP servers and lets you preview and stage pages and sites before uploading them to your Web server:

•   You can easily upload or download individual Web pages or an entire Web site.

•   You can edit your site locally and then run an incremental update to the remote server, overwriting only the files that have changed.

•   You can edit your site on the remote server and then run an incremental update to your local hard disk, overwriting only the files that have changed.

Drag your selection from the Files tab to the FTP tab in Windows.

Drag your selection from the Files tab to the FTP tab in Mac OS.


Setting up FTP access
Uploading and downloading your Web site

Setting up FTP access

To access an FTP server, you need to know the FTP address, the path to your personal directory, and your user name and password.

To set up FTP access:

1  Make sure that you have the TCP/IP networking set up properly on your computer. Consult the user manual of your modem, ISDN, or network adapter for more information.

2  Click the Site Settings button ( [image]) in the site toolbar.

3  In the left pane of the Settings dialog box, click the FTP icon ( [image]).

4  In the Server text box, type in the FTP address specified by your ISP for the Web server you want to upload to.

5  Enter a directory name in the text box, or click Browse. If you click Browse, Adobe GoLive tries to connect to that directory. In most cases, however, you can leave this text box blank because your access privileges typically are restricted to your personal folder.

6  In the Username text box, type in the user ID that the server administrator gave you.

7  If you want to skip the password entry text box the next time you connect to the server (and in future sessions), select the Remember Password option. Then, in the Password text box, type in the personal password you received from the server administrator.

8  In the Port text box, type the number of the port you use to access your Web server (21 is frequently used). If in doubt about the port number, consult your server administrator.

9  If the FTP server is protected by a firewall, you may have to select Use Passive mode.

10  If you have used the Publish option in the File, Folder, and Group Inspectors, select the two check boxes in the Honor “Publish” State group of options to ensure that all your designated items are uploaded correctly.

11  Select Upload Referenced Files Only to make sure you don’t upload any excess files.

12  Select Show List of Files to Upload to check the file list before uploading.

13  Select Show Options Dialog to display a dialog box with the same options as the Upload pane of the Site Settings dialog box every time you start uploading.


Connecting to FTP servers
Uploading and downloading your Web site

Connecting to FTP servers

Adobe GoLive supports most popular server platforms, including standard configurations of Mac OS, UNIX, Sun OS, Sun Solaris, and Windows NT.

To connect to the FTP server specified in the setup:

1  If necessary expand the Files tab of the site window to show the auxiliary folders, and click the FTP tab. For more information, see Viewing a site using the Files tab.

2  Click the FTP Server Connect/Disconnect button ( [image]) in the site toolbar to access the server.

If this is the first time you have connected to an FTP server, you are prompted to specify the server location.

3  Adobe GoLive starts connecting to the FTP server. A status message displays in the status line at the bottom of the FTP tab:

•   Connecting indicates that Adobe GoLive is accessing the server.

•   Getting File List indicates that the connection has been established and that Adobe GoLive is reading the content of the target directory.

•   Connected indicates that Adobe GoLive is online.

If this is the first time you have uploaded your site, you will most likely see an empty directory in the FTP tab of the expanded site window. If your site has been uploaded before, a file list similar to the one in the Files tab of the site window appears. You can now upload your site, double-click an icon in the FTP tab to edit a file remotely, or download files from the FTP server to your local hard disk.


Uploading your Web site
Uploading and downloading your Web site

Uploading your Web site

You can upload you Web site as soon as you see the word Connected at the bottom of the FTP tab of the site window.

To upload or incrementally update your site on the remote server:

1  Click the Upload to Server button ( [image]) in the site toolbar, or drag the files or folders you want to upload from the list in the Files tab of the main site window to the list in the FTP tab of the expanded site window.

2  If this is a first-time upload, your site is copied to the FTP server. If a copy of your site already exists on the remote server, Adobe GoLive copies only the files that have been changed since the last upload.

3  An Uploading message appears in the status line at the bottom of the FTP tab to indicate that your site is being copied to the server. When uploading is complete, the message in the status line reverts to Connected.

4  Click FTP Server Connect/Disconnect ( [image]) to disconnect.


Downloading files
Uploading and downloading your Web site

Downloading files

Adobe GoLive allows you to download selected files or entire sites.

To download files or folders or to incrementally update your site on your local hard disk after editing files on the server:

1  When you are connected to the server, click Download from Server ( [image]) in the site toolbar, or drag the files you want to download from the FTP tab of the expanded site window to the list in the Files tab of the main site window.

2  If you copy files you have edited on the remote server, Adobe GoLive copies only files that have a more recent modification date.

3  A Downloading message appears in the status line at the bottom of the FTP tab to indicate that your site is being copied to the local hard disk. When Adobe GoLive finishes downloading, the message in the status line reverts to Connected.

4  Click FTP Server Connect/Disconnect ( [image]) to disconnect.


Using the FTP Upload/Download window
Uploading and downloading your Web site

Using the FTP Upload/Download window

You can use the FTP Upload & Download window to connect to an FTP server and copy files in either direction, if your access privileges allow you to do so.

To upload or download files using the FTP Upload /Download window:

1  Make sure that you have set up the TCP/IP networking setup correctly on your computer. Consult your modem, ISDN, or network adapter user manual for more information.

2  Choose File > FTP Upload/Download.

3  In the Server text box in the FTP Upload/Download window, type the FTP address of the Web server you want to access.

4  In the Directory text box, type the directory path to your personal folder on the FTP server.

If you specify a directory, Adobe GoLive tries to connect to that directory. In most cases, however, you can leave this text box blank because your access privileges typically are restricted to your personal folder.

5  In the User Name text box, type in the user ID that the server administrator assigned you. (If you want to access a public download area, you can often use Anonymous as the user ID, which doesn’t require a password.)

6  In the Password text box, type in the personal password that the server administrator gave you.

7  Click Connect. After connecting to the remote server, Adobe GoLive displays the directory on the remote server volume.

8  To download, drag files or folders one at a time from the FTP Upload/Download window to the desktop. To upload, do the reverse.

Instead of entering the server information each time you connect, you can set up servers in the FTP Server preferences. Choose Edit> Preferences, and expand the Network icon in the left pane of the Preferences dialog. These servers appear in the pop-up menu next to the User Name text box. Servers you have specified for the built-in FTP tool are also available on the pop-up menu in the FTP Upload/Download window.


Using the Web Download command (Mac OS)
Uploading and downloading your Web site

Using the Web Download command (Mac OS)

The Web Download command is a powerful feature that lets you download a selected Web page, complete with all images, and save it to a folder. Unlike a complete FTP download of a site, the Download command yields a flat file structure that differs from the structure on the Web site. (Note that media files or images referenced by JavaScript, such as rollover images, are not downloaded.)

To download a Web page:

1  Choose File > Web Download.

2  Enter the URL for the page you want to download.

3  Type in the URL, or copy and paste a URL from the bookmarks window of your Web browser. Click Save As.

4  Specify a location, or create a new folder to hold the downloaded page and its associated image and media files, and then click Save.

5  A message indicates that the host has been contacted.

6  One or more messages appear, indicating that files are being downloaded.

7  Adobe GoLive opens the downloaded page, complete with all images (images referenced in scripts are not downloaded).


Setting FTP preferences
Uploading and downloading your Web site

Setting FTP preferences

You set general Internet access options, such as proxy server addresses in the Network preferences.

See also:

To set the general Internet Access preferences


To set the general Internet Access preferences
Setting FTP preferences

To set the general Internet Access preferences:

1  Choose Edit > Preferences, and click the Network icon in the left pane of the Preferences dialog box.

2  Select Use FTP Proxy if your ISP uses a proxy server for security reasons. A proxy server acts as a front end for the actual Web server, intercepting viruses and increasing overall security in server operations. If in doubt, ask your server administrator whether your ISP uses a proxy server.

3  In the Host text box, type the IP address or host name of your proxy server.

4  In the Port text box, type in the number of the port you use to access your proxy server. (21 is a frequently used port number; or you can consult your server administrator.)

5  Repeat steps 2 and 3 above for the HTTP proxy server, if required.

6  If the server administrator requires you to connect in Passive Mode, select Use Passive Mode (PASV). In this case, Adobe GoLive initiates the connection, rather than requesting the server to connect back to you. This option lets Adobe GoLive work with firewalls that forbid incoming connections.


Setting FTP Server Network preferences
Uploading and downloading your Web site

Setting FTP Server Network preferences

You can set up a list of preferred FTP servers using the FTP Server Network Preferences dialog box.

See also:

To add an FTP server to the FTP Server list

To delete an FTP server from the FTP Server list


To add an FTP server to the FTP Server list
Setting FTP Server Network preferences

To add an FTP server to the FTP Server list:

1  Choose Edit > Preferences, and expand the Network icon in the left pane of the Preferences dialog box. Click the FTP Server icon.

2  In the right pane, click New to activate the Server and Directory text boxes.

3  Type in the FTP address of the server, and press the Tab key to move the cursor to the Directory text box.

4  Enter the desired directory, and press the Tab key to move the cursor to the Username text box. Press Enter.

5  When you finish entering FTP servers, click OK.

See also:

To delete an FTP server from the FTP Server list


To delete an FTP server from the FTP Server list
Setting FTP Server Network preferences

To delete an FTP server from the FTP Server list:

1  Choose Edit > Preferences, and expand the Network icon in the left pane of the Preferences dialog box. Click the FTP Server icon.

2  In the right pane, select a server, and click Delete to remove a selected server entry from the list.

See also:

To add an FTP server to the FTP Server list


Assigning an application to downloaded files
Uploading and downloading your Web site

Assigning an application to downloaded files

You can assign a program to files you download from the Web in the FTP Download Network Preferences dialog box.

Mac OS uses a special four-character code to identify file types and creators, allowing the user to open files by double-clicking.

Files downloaded from a Windows NT or UNIX-based Web server don’t contain any file type and creator information, so you must specify which program to use in order to open them. This is done by mapping a filename extension, such as .GIF or .HTML, to an application.

Note: The Up-/Download settings are used only from the FTP client during file transfer; they have no effect on the File Mapping settings.

To map filename suffixes to Macintosh applications:

1  Choose Edit > Preferences, and expand the Network icon in the left pane of the Preferences dialog box. Click the Up-/Download icon.

2  Click New to add a new entry to the list box.

3  Type in the description in the Suffix, Type, and Creator text boxes, or click Select to select an application in the dialog box.

4  Choose an option from the pop-up menu below the Transfer column to determine how you want to have your files transferred:

•   Select Text is generally used for HTML pages and general text files.

•   Select Binary is generally used for all other files.

To map filename suffixes to Macintosh applications by dragging and dropping:

1  Choose Edit > Preferences, and expand the Network icon in the left pane of the Preferences dialog box. Click the Up-/Download button.

2  Drag an unknown file from the desktop to the FTP Download pane, and drop it on the mappings list.

3  Click Delete to remove a selected mapping; click Import Now to import mappings from Internet Config.


Exporting your Web site
Uploading and downloading your Web site

Exporting your Web site

If your webmaster requires you to use a special folder structure, such as flat, you can use the Export Site command to modify your site before uploading. (The Export Site Command is seldom used in GoLive versions 3.0 and 4.0.)

To export your Web site:

1  With the site window open, choose Site > Export Site. In the Export Site Options dialog box, set the options for folder hierarchies and publish status.

2  Set the Hierarchy options to control the underlying directory structure of your site before uploading to the Web server:

•   As in Site maps the hierarchy of groups, pages, and resources within your site window to the resulting site folder.

•   Separate Pages and Media creates a site folder containing two subfolders for HTML pages and media items, respectively.

•   Flat creates a site folder containing all HTML pages and media items, but no subfolders.

You can edit the default folder names used for exporting the site in the Folder Names Site Preferences dialog box.

A. Site as in project B. Site with separate pages and media C. Site with flat hierarchy

3  In the Honor “Publish” State Of options, specify which files and folders to export:

•   Groups exports all folders and groups that have their Publish status set accordingly in the Files tab of the Folder Inspector. For more information, see Creating folders and groups.

•   Pages exports all HTML pages that have their Publish status set accordingly in the File tab of the File Inspector. For more information, see Managing objects using the File Inspector for reference.

4  Select Export Only Referenced Files to include only referenced HTML pages and media files from the current project into the site folder. This option yields small sites and minimizes redundancy by omitting all files that are not referenced by any page within the site.

5  Select Export Referenced Files That Are Not Part of the Site to place all referenced HTML pages, media files, and other resources in the site folder, including files from external volumes. This keeps your site intact.

6  Select Don’t Show Again to hide the Export Site Options dialog box in future sessions.

7  Click Set as Default to save the current settings to the preferences.

8  Optionally, you can click More to streamline the HTML source code when exporting the site.

The options in the HTML Options dialog box let you strip off selected source code elements to generate “pure” HTML without compromising the integrity of the visual presentation. The following source code streamlining options are available:

•   GoLive Tags removes application-specific tags and attributes. If your pages contain animation, scripted actions, or custom plug-ins, select this option to protect your work and deny editing to other Adobe GoLive users.

•   Comments removes HTML comments created using the body and header comment icons from the Palette.

•   Spaces removes the white space characters used to indent lower-level tags.

•   Linefeeds removes all carriage return and linefeed characters, creating an HTML flow without line breaks.

Important: You should make a copy of your site before you use this option; otherwise you may not be able to reuse the pages.

9  Click Export in the Export Site Options dialog box, or click in the Folder Names Site Preferences dialog box to resume exporting.

10  Specify where you want Adobe GoLive to save your site folder.

11  Click Save.

12  A Site Exported Successfully message informs you that the site folder is ready for uploading.

If the Site Exported Successfully message box indicates files that were not published, check the Publish Referenced Files That Are Not Part of the Site option in the Export Site Options dialog box, and try again. If error messages persist, use the Adobe GoLive error analysis tools or stage your site on a local server and check all links.


Setting up distributed Web sites
Managing Web Sites

Setting up distributed Web sites

The Adobe GoLive URL mapping feature allows you to edit a Web site whose contents are distributed over several servers when you publish it on the Web. When you edit a site on your local hard disk, you work with several site documents, one for each server. With URL mapping activated and correctly set up, Adobe GoLive uses local paths to facilitate editing and automatically replace the local paths with the correct server URLs if you export your site.

See also:

Setting up URL mapping preferences


Setting up URL mapping preferences
Setting up distributed Web sites

Setting up URL mapping preferences

This URL mapping mechanism redirects folder paths, enabling Adobe GoLive to reference external pages and images as if they were stored in the site folder. You can link to those pages, images, or other resources using the point and shoot feature between two site windows or the Browse button in the Inspector. With the required folder mappings specified, Adobe GoLive inserts the correct paths into the resulting URLs without producing error messages.

Note: Check with your Web server administrator to make sure that the mappings you specify in Adobe GoLive exist on the Web server. Special rules may apply, depending on the operating system platform and Web server application.

See also:

To map to an external folder with an alias (Mac OS) or shortcut (Windows)

To specify new folder mappings without using an alias (Mac OS) or a shortcut (Windows)


To map to an external folder with an alias (Mac OS) or shortcut (Windows)
Setting up URL mapping preferences

To map to an external folder with an alias (Mac OS) or shortcut (Windows):

1  Choose Edit > Preferences, and click the Site icon in the left pane.

2  Select Create URLMappings for Alias Folders. Click OK to close the Preferences dialog box.

3  On the desktop, select the external folder you want Adobe GoLive to map to.

4  Ctrl+drag (Windows) or Command-Option-drag (Mac OS) the folder symbol to the site folder for which you have just activated URL mapping.

5  Return to Adobe GoLive, and click the Update button in the site toolbar. A folder alias should appear in the list in the Files tab of the main site window. (You may have to navigate to the folder to display it if you have created the alias in a subfolder of the site folder.) This alias reminds you that URL mapping has been activated for the current site. You cannot open the folder to perform file management operations, nor can you link any items in that folder using the Point and Shoot button.

6  Choose Site > Settings, and then click the URLMappings icon ( [image]) in the left pane. Adobe GoLive creates a new mapping that uses the paths specified by the alias you created in step 4.

7  Edit the path by doing one of the following:

•   In the pop-up menu next to either text box, select the root directory.

•   Ctrl-click (Windows) or Option-click (Mac OS) the Browse button to open the Edit URL window showing the full path.

8  Adobe GoLive will now map the URLs of any items you reference in the external folder using Browse in the Inspector (or the Point and Shoot button if you choose to create a second site for the external folder).

See also:

To specify new folder mappings without using an alias (Mac OS) or a shortcut (Windows)


To specify new folder mappings without using an alias (Mac OS) or a shortcut (Windows)
Setting up URL mapping preferences

To specify new folder mappings without using an alias (Mac OS) or a shortcut (Windows):

1  Choose Site > Settings, and click the URL Mappings icon in the left pane.

2  Click New.

3  For the Map Local Folder or Remote Server option, click Browse and then navigate to select the folder or enter the path.

4  For the With Local Folder option, click Browse and then navigate to select the folder.

5  Click OK.

6  Click Update in the toolbar to update the site window.

To export your site:

Note: In Adobe GoLive versions 3.0 and 4.0, it is generally not recommended that you export your site unless you need to remove GoLive tags or use a flat structure for your site.

1  Preview your pages using your favorite browser. Notice that when you move the pointer over any hyperlink that references a page in another part of the site (that is, in another folder), you see the URL for that page.

2  Export your site using Site > Export Site command.

3  Preview at least one page again in the browser.

4  Adobe GoLive automatically rewrites all links and file references based on the server mapping preferences you specified when creating the site. All parts of your site are ready for uploading now.

Important: When you are editing a distributed Web site, deselect Files and External References in the Rescan Root Folder group of options in the Clear Site Options dialog box. If selected, these options cause all external files to be copied into the current site folder when you choose Site > Clear Site, destroying the structure of your distributed site.

See also:

To map to an external folder with an alias (Mac OS) or shortcut (Windows)


Publishing your Web site
Managing Web Sites

Publishing your Web site

You are ready to publish your Web site when all the pages are complete, the resources in place, the links tested, the site window shows no bug icons, and the Errors tab is empty.

See also:

Finding an ISP to host your Web site

Acquiring a domain name

Making your site known on the Web

Registering with the search engines


Finding an ISP to host your Web site
Publishing your Web site

Finding an ISP to host your Web site

If you are designing pages, you probably already have an ISP. If you need an ISP, consider visiting http://thelist.internet.com.

The internet.com site, also known as The List(TM), gives you a choice of more than 4000 Internet service providers, both national and international. You can use this site to find the provider that meets your access speed and site hosting needs.


Acquiring a domain name
Publishing your Web site

 Acquiring a domain name

Although not absolutely necessary, a domain name is much like a brand name or trademark that makes your site’s address much more accessible for new viewers and easier to recall for frequent viewers.

A domain name includes at least two parts:

•   The subdomain. This is typically a company or organization name (for example, adobe), or an acronym.

•   The high-level domain. This is the portion after the dot in a Web address (for example, .com for commercial sites).

Currently, the InterNIC organization administers domain names.

In most cases, your ISP handles the registration procedure for you. Alternatively, you can contact InterNIC at http://www.internic.net.


Making your site known on the Web
Publishing your Web site

Making your site known on the Web

When you have built your site, it is time to make your Web site known to the world. Briefly describe your site, its targeted audience, and its URL. Keep your announcement free of hype; this is considered bad “Netiquette.”

The sponsorship-funded Manifest Service lets you register online to have your announcement included in the What’s new too list (http://newtoo.manifest.com). The URL of the submit form is http://newtoo.manifest.com/submit.html.

Many Internet marketing agencies and specialized consultants submit your site announcement to hundreds of search engines, directories, what’s new, and what’s cool sites. Typical of these commercial services are the following:

•   Submit It! (both commercial and free announcement services) at http://www.submit-it.com.

•   PostMaster Announcement Service at http://www.netcreations.com/postmaster.

•   Webpromote at http://www.webpromote.com.

•   Pointers to Pointers at http://www.homecom.com/global/pointers.html.


Registering with the search engines
Publishing your Web site

Registering with the search engines

Search engines, also referred to as spiders, canvas the Web for information at regular intervals. They build searchable indexes from the keywords they find in the header sections (or, more recently, in the body sections) of home pages or other Web pages. Before you register, make sure that your home page includes a relevant selection of keywords. For instructions on how to enter keywords, see Adding Keywords tags.

Before you register with the search engines, test your site using the Adobe GoLive Index Search feature. For more information, see Simulating how Web engines search your site (Mac OS).

Note: Search engines are not the medium of choice for short-term promotion. It is hard to predict when they will find your site.

For information on registering with the major search engines, visit their Web sites or consult your webmaster.


Setting advanced preferences and options
Managing Web Sites

Setting advanced preferences and options

The Site preferences—General, Export, Folder Names, Site View, and Page Status—control the way the Adobe GoLive site management tools behave. Additionally, you can determine whether path specifications within URLs that reference other items in subfolders of the site folder are relative or absolute.

To open the Preferences dialog box:

1  Choose Edit > Preferences. In the left pane of the Preferences dialog box, select the required icon. If necessary click the symbol next to the icon to expand the preferences.

See also:

Setting the Site preferences

Setting Export preferences

Setting the Site Folder Names preferences

Setting Site Page Status preferences

Setting the Site View preferences


Setting the Site preferences
Setting advanced preferences and options

Setting the Site preferences

You can use the Site Preferences dialog box to set internal parsing routines and to determine how Adobe GoLive handles URLs, files, and folders.

To set the Site preferences:

Click the Site icon in the left pane of the Preferences dialog box, and set the following options:

•   Check External URLs verifies references made to external resources from within your site and reports links within your pages as faulty if the targets do not exist. This option requires constant access to the Internet.

•   Reparse Only Changed Project Files instructs Adobe GoLive, when it opens a site document, to verify only the hyperlinks and file references of files that have been changed since the site was saved last.

•   Spring-Loaded Folders opens closed folders automatically when you drag a selection to a folder and wait a few seconds (Mac OS).

•   Ask Before Deleting Objects prompts you for a confirmation whenever you try to delete a file from the site.

•   Create URL Mappings for Alias Folders converts folder aliases you drag into the site folder to URL mappings. For more information, see Setting up URL mapping preferences.

•   Move Them to the Recycle Bin (Windows) or Finder Trash (Mac OS) moves excess files to the Trash on your desktop.

•   Move Them to the Site Trash moves excess files to the Site Trash folder in the site data folder, which is at the same level as your site folder.

•   Show Warning controls the dialog box that appears when you select the Clean Up command.


Setting Export preferences
Setting advanced preferences and options

Setting Export preferences

The Site Export Preferences dialog box determines how Adobe GoLive assembles your material when you use the optional Site > Export Site command. To set these preferences, choose Edit > Preferences, expand the Site icon in the left pane of the Preferences dialog box, and click the Export icon. For more information on the options available, see Exporting your Web site.

Select the Show Options Dialog option in the Site Export Preferences dialog box to show the Export Site Options dialog box whenever you choose Site > Export Site.


Setting the Site Folder Names preferences
Setting advanced preferences and options

Setting the Site Folder Names preferences

The Site Folder Names dialog box lets you enter custom folder names that are used when you export a site with Adobe GoLive. This feature is useful if your Internet service provider specifies a default directory structure for you to use when uploading your site. Additionally, you can specify the filename extension and the folder name for new pages (generic pages) that you add while working in the Site tab.

To set the Site Folder Names preferences:

1  Expand the Site icon in the left pane of the Preferences dialog box, and click the Folders icon.

2  Enter custom folder names in either text box:

•   Pages is the default folder for HTML pages.

•   Media is the default folder for images and media files (such as plug-ins).

•   Files Not in Site or Project is the default folder for unreferenced files.

3  In the Extension text box, specify an extension for new pages created while working in the Site tab. The default extension is .html. If a DOS or Windows-based machine serves your site, enter .htm instead.

4  In the Folder name text box, enter the name of the folder where generic pages are stored until you move them to the folder holding your HTML pages.

5  In the Home Page name text box, enter the name used for the home page (usually index.html).


Setting Site Page Status preferences
Setting advanced preferences and options

Setting Site Page Status preferences

The Site Page Status Preferences dialog box lets you define publishing status. These indicators can be selected in the Page tab of the File Inspector to track who has been maintaining or editing your site.

To define a new status:

1  Choose Edit> Preferences and expand the Site icon in the left pane of the Preferences dialog box. Click the Page Status icon.

2  Click New to add a new status.

3  In the text box on the right, below the status list box, type in descriptive text—for example, Web-ready. As you type, the new status is added to the list.

4  Click the color field to the left of the text box, and select a color.

To edit an existing status:

1  Click the Page Status icon in the left pane of the Preferences dialog box.

2  Select the status to be edited, and do one of the following:

•   Edit the status in the text box. As you type, the status changes in the list. Click the color field next to the text box to open the color picker, and select a new color.

•   Delete a status listing.


Setting the Site View preferences
Setting advanced preferences and options

Setting the Site View preferences

The Site View Preferences dialog box let you specify default colors for items displayed in the Site tab. The choices you make here appear in the Color tab of the Site View Controller.

To set default colors for the Site:

1  Choose Edit> Preferences and expand the Site icon in the left pane of the Preferences dialog box. Click the Site View icon.

2  Click a color field in the Colors for New Sites section to open the color picker, and select a custom color for the current item:

•   Navigation Curves are the arrows representing navigational links.

•   Link Curves are the arrows representing hyperlinks.

•   Text applies to filenames or page titles in the Site tab.

•   Background sets the default background color for the Site tab.

•   Monochrome Item Color sets the default color for the Monochrome display option.

3  Click Apply.

4  To reset the display colors to their default values, click Default Settings.


Web Technology Support

Adobe GoLive provides basic viewing and editing support for various emerging Web technologies, including Extensible Markup Language (XML) and Active Server Pages from Microsoft.

Adobe GoLive preserves hidden non-HTML code even if such code is in special locations, such as the space before the first opening <HTML> tag or between table cells.

See also:

Adobe GoLive and XML

Adobe GoLive and ASP

Visual indicators for foreign code


Adobe GoLive and XML
Web Technology Support

Adobe GoLive and XML

Adobe GoLive recognizes XML, the simplified dialect of SGML (Standard Generalized Markup Language) for the structured presentation of information on the World Wide Web. Adobe GoLive reads XML, writes it back to file without any changes, and lets you inspect and edit existing XML declarations and tags. Because of the nature of XML, a visual editor is not available.

XML is a subset of SGML for defining custom markup languages. XML documents use Document Type Definitions (DTDs) that define the custom tags available for use in the document. Adobe GoLive does not validate (that is, syntax check) XML files. For more information on XML, visit the Web site at www.w3.org/XML/ or www.xml.com/

With Adobe GoLive, the user can open existing XML documents by choosing File > Open, by double-clicking the XML file, or by dragging and dropping the file onto the Adobe GoLive application. The Outline Editor is recommended for viewing and editing XML tags.

XML Tags in Outline View

Adobe GoLive Layout view shows the XML document in a collapsed format in which the XML structure is represented by box symbols. Click the triangle on the left side of a box to expand or collapse the element or show or hide nested elements.

XML Document in Layout View: A. Boxes represent XML structure. B. Triangle control expands or collapses element views.

You can also switch to the source view and edit the XML markup as text.

XML Document in Source View

Adobe GoLive lets XML developers edit the text of XML documents. Other than the changes you make, Adobe GoLive will write the balance of the document without modifying the code, although it may modify white space. You can view the new Adobe GoLive structure by looking in your Adobe GoLive’s Modules folder in the WebDatabase folder. You can open and view the various files in Outline, Layout, and Source views. Successful editing of these files requires expert-level knowledge of XML.


Adobe GoLive and ASP
Web Technology Support

Adobe GoLive and ASP

Adobe GoLive is an ASP-friendly application. It reads ASP code, writes it back to file without any changes, and lets you inspect and edit existing code, including JScript, VBScript, Visual Basic for Applications, and other proprietary languages that give Web authors enhanced control over Microsoft Internet Explorer.


Visual indicators for foreign code
Web Technology Support

Visual indicators for foreign code

Adobe GoLive has special indicators for foreign code. These vary depending on where in the page the code appears.

See also:

Foreign code in the head section

Foreign code in the body section

Foreign code in tables


Foreign code in the head section
Visual indicators for foreign code

Foreign code in the head section

Each line of foreign code in the head section, such as an XML declaration, generates a Foreign Item icon ( [image]) in the head section pane of the document window.

You can click on the Foreign Item icon in the head section pane and inspect and edit its foreign source code in Foreign Item Inspector. (Choose Window > Inspector to open the Inspector.)

You can edit the code in the text box of the Foreign Item Inspector and save it to disk. This same Inspector also lets you view and edit code between table cells.

Important: When you edit non-HTML code, be sure to know what you are doing. You should be familiar with the specific syntax and requirements that led to the insertion of that code, otherwise serious damage may result to your pages.


Foreign code in the body section
Visual indicators for foreign code

Foreign code in the body section

Non-HTML code, such as XML markup, found between HTML tags is indicated by the unknown tag that experienced Adobe GoLive users will recognize from earlier versions. An example appears below:

You can click unknown tag symbols and inspect them in the Tag Inspector.


Foreign code in tables
Visual indicators for foreign code

Foreign code in tables

Non-HTML code between table cells can be found using the new Hidden tab of the Table Inspector.

To find foreign code in tables:

1  Select the table by clicking at its top.

2  In the Table Inspector, select the Hidden tab. In the outline view of the table, small blue dots between the table cells indicate that there is hidden-HTML or non-HTML-code.

3  Click any blue dot. In the document window, the table is reduced to a simple contour with one or more unknown tag symbols in it.

4  Click on the foreign item to display its content in the Foreign Item Inspector. You can now edit the code and save it to disk, if desired.

If you want to remove blue dots, press the Delete key.


Creating Actions

Adobe GoLive actions are built-in scripting components which allow you to easily add interactivity to your Web pages. Actions are powered by JavaScript, and add code into your HTML document. Actions can be easily added to pages without coding JavaScript; just drag and drop.

Adobe GoLive actions are also editable and extensible. You can use the existing actions or create your own to develop even more powerful custom solutions. If you have some experience with JavaScript, this appendix provides information you will need to edit or create your own actions. Greater knowledge of JavaScript will help you create more complex actions.

See also:

Adobe GoLive action types

Creating your own actions

Action tutorials

Difference between actions and scripts


Adobe GoLive action types
Creating Actions

Adobe GoLive action types

Because actions use JavaScript, they can be initiated by any number of interactive events. Events are things like clicking a mouse, moving a mouse, double-clicking, pressing a key, or even just loading a page. Each of these types of events has an associated event handler which is used to trigger the script. In Adobe GoLive there are three main types of actions, characterized by the types of events that can trigger them: onload event actions, link actions, timeline editor actions.

See also:

Onload Event actions

Link actions

TimeLine Editor actions


Onload Event actions
Adobe GoLive action types

Onload Event actions

Onload event actions are triggered when a Web page first loads, before any user interaction occurs. These actions will execute before any other actions in the document. To add an onload action, insert an action icon from the CyberObjects tab of the Adobe GoLive Palette window. Dragging the Action HeadItem icon from the palette into the header region of your page sets the action to trigger when the page loads. This type of action can only be added to the header, and will automatically add the “onload” event handler into the <Body> tag. Use this type of action only when you want something to happen when the page first loads.

Selecting the action icon will reveal the action pop-up menu in the Inspector where you can define which action you would like to occur.


Link actions
Adobe GoLive action types

Link actions

Link actions are actions which are applied to hyper-linked items and triggered by some type of interaction with the link. The following events support link actions:

•   MouseClick—triggers an action upon a single mouse click

•   MouseEnter—triggers an action when the mouse pointer is moved over a link

•   MouseExit—triggers an action when the mouse is moved away from a link

•   DoubleClick—triggers an action when the user double-clicks a link

•   MouseDown—triggers an action when the user holds the mouse button down while the pointer is over a link

•   KeyUp—triggers an action when the user releases any key

•   KeyDown—triggers an action when the user presses any key

•   KeyPress—triggers an action when the user presses or holds down a key

To add a link action to your page, create and highlight a link (on a picture or text) and switch to the Actions tab in the Inspector window. You should see a list of events on the left side of the Inspector window. If you haven’t highlighted a hyper-linked item, no events will be active. This is because link actions are initiated by a JavaScript event handler, which can only reside in the <A> tag of a linked item.

If you want to add a link action without making the hyperlink actually go to another page, you can either make the link to the same page or enter the “#” sign in the URL field.


TimeLine Editor actions
Adobe GoLive action types

TimeLine Editor actions

You can also use the TimeLine Editor to add actions. Add actions to the action track of the TimeLine Editor by Ctrl-clicking (Windows) or Command-clicking (Mac OS). Unlike the onload and link actions, Timeline actions are not triggered by event handlers but rather by the timeline sequence. In this way you can initiate time based actions, or actions which interact with a given scene.


Creating your own actions
Creating Actions

Creating your own actions

Adobe GoLive allows you to easily create and edit action files with familiar tools. Actions are actually HTML files, not just code snippets, which reside in the Adobe GoLive application folder (Modules\JScripts\Actions). Any file placed in the Actions folder will appear when you select the action pop-up menu in Adobe GoLive. Adding or deleting a file from this folder will add or delete it from the action pop-up menu. You can organize the actions however you like within hierarchical subfolders, so long as these folders remain within the Actions folder. Any subfolders will appear as hierarchical menus in the actions pop-up menu. During start-up, Adobe GoLive scans the Actions folder to determine which actions to load. If you make any changes to the content of the Actions folder it will not be reflected in Adobe GoLive until the program is quit and restarted. Adobe GoLive is extremely sensitive to errors in actions files, so if Adobe GoLive crashes after you add a new action, the action file most likely contains errors in syntax or structure. Simply remove it from the Actions folder and restart Adobe GoLive. For this reason it’s best to edit action files outside of the Actions folder until you are sure they are finished and properly coded.

Adobe GoLive actions generally use the extension .action. Though it’s not required, it’s a good idea to use this extension to maintain downward compatibility. Adobe GoLive merely looks for the presence of a <csactionclass> tag in the document to verify that the file is a valid action.

See also:

Changing the action icon (Mac OS)

Anatomy of an action file

Action title

Action tags

<csactionclass>

<csactionparam>

Adobe GoLive parameter types

Parameter types for Adobe GoLive 4.0

JavaScript source

Layout grid

Customizing the dialog box


Changing the action icon (Mac OS)
Creating your own actions

Changing the action icon (Mac OS)

The action icons which appear in the pop-up menu in Adobe GoLive are based on the finder icons of the action files themselves. Icons which appear in the action pop-up menu can be changed by changing the finder icon of the action file. You can change the file’s icon through ResEdit or by copying and pasting the icon of another file into the appropriate actions file. This can be accomplished by copying and pasting the icon from the “Get Info” windows of each icon within the Finder.


Anatomy of an action file
Creating your own actions

Anatomy of an action file

Unlike Script files (.scpt extension), actions contain more than just JavaScript code. An action file is an actual Adobe GoLive HTML file which allows you to modify the content of the actions Inspector window, as well as the types of parameters that the user can enter. Below is a diagram indicating the different components of an Adobe GoLive action file. All actions must contain these basic elements in order to function properly. You’ll notice that many of the items in this page are familiar Adobe GoLive components such as custom tags, JavaScripts, layout grids, etc. In this way you can edit the content and behavior of your action in a familiar Adobe GoLive way.

Now let’s look at another example. The OpenAlertWindow.action file is a fairly simple action file containing the basic elements of an Adobe GoLive action. You’ll find it in the Message subfolder of the Actions folder. Open the file now (if the file opens as a text file, you’ll need to add the action extension to your Filename Extensions in Preferences).


Action title
Creating your own actions

Action title

This is the title of your action. It is an optional component and you can use any name. This title only appears in the action layout window.


Action tags
Creating your own actions

Action tags

Adobe GoLive needs special tags to identify an action, to create the parameter controls and to generate the JavaScript code. These tags are not optional. Because these are custom tags, they appear as blue rectangles in the layout mode. Clicking them reveals the attributes and values associated with the tags. The values are intended to be edited while the names should be left as is.

A. Action title B. Action tags C. JavaScript D. Layout grid


<csactionclass>
Creating your own actions

<csactionclass>

The <csactionclass> tag identifies the action by creating a class object which Adobe GoLive loads at start-up. When Adobe GoLive launches, it searches the actions folder for all class objects so that it can display them in the actions pop-up menu. You must use an opening and closing <csactionclass> tag in order for the action to register properly. This tag is not optional.

The <csactionclass> tag has four attributes, plus a fifth one used with Adobe GoLive 4.0. Clicking on the tag will reveal its attributes in the Tag Inspector:

•   NAME: The name which appears in the Actions pop-up menu.

•   FUNCTION: The name of the JavaScript function which will be called when the action is triggered. The name is arbitrary but must correspond to the function name in the JavaScript code. In this example the JavaScript function is CSOpenAlert(), the function which will initiate the Alert box. Note that you do not include the parentheses here.

•   NSVERSION: Supported version number of the Netscape browser. It is up to you to determine the lowest supported browser version number and enter it here. The number is used by the BrowserSwitch script and also displayed in the Actions Inspector window.

•   IEVERSION: Supported version number of the Internet Explorer browser. It is up to you to determine the lowest supported browser version number and enter it here. The number is used by the BrowserSwitch script and also displayed in the Actions Inspector window.

•   ACTIONTYPE: Identifies the type of Action based on the number value for this attribute. This tag is not included in this particular example file.

You can use three action types:

Standard Action (type 1)

Action Container (type 2) an Action which does nothing on its own, but only points to other actions)

Condition Action (type 3) returns a value of TRUE or FALSE

Adobe GoLive uses the ACTIONTYPE to enable/disable menu items in the action pop-up menu. The Condition Pop-up menu only displays Condition Actions. The main action pop-up displays only standard actions and action containers. Action menus which are included in a “GLActionConditionParam” or “GLActionGroupParam” only display standard actions to avoid nested actions. An action which contains a “GLActionGroupParam” or “GLActionConditionParam” must be set to “ACTIONTYPE = 2" (action container attribute) to work correctly.

If an ACTIONTYPE is not defined (as in this case), Adobe GoLive will handle the action as a Standard Action type.


<csactionparam>
Creating your own actions

<csactionparam>

This tag is used to identify and control the user interactive components of the Inspector window that comes up when a given action is chosen. By inserting the appropriate parameter type, you can add things like input boxes, pull-down menus, browse buttons, etc. into your action Inspector window, and pass values entered in these fields to your JavaScript code for processing. The <csactionparam> tag is optional and can be omitted where no user input is needed for an action. Adobe GoLive 4.0 ships with 13 different parameter types.


Adobe GoLive parameter types
Creating your own actions

Adobe GoLive parameter types

GLActionStringParam

GLActionBoolParam

GLActionNumParam

GLActionEnumParam

GLActionLayerParam

GLActionLayerPosParam

GLActionImageParam

GLActionURLParam

GLActionColorParam

GLActionPlugInParam

GLActionSceneParam

Adobe GoLive 4.0 supports scrolling-enabled Inspectors that help developers build a graphical user interface for complex actions with multiple parameters. If you create an action that requires multiple controls (text boxes, checkboxes, etc.) in the Inspector, you can now enable scroll bars by adding a new attribute to the <CSACTION> tag in the .action file:

•   HSCROLL: Inspector has horizontal scroll bar.

•   VSCROLL: Inspector has vertical scroll bar.

•   SCROLL (or HSCROLL plus VSCROLL): Inspector has both scroll bars.


Parameter types for Adobe GoLive 4.0
Creating your own actions

Parameter types for Adobe GoLive 4.0

GLActionGroupParam

GLActionConditionParam

In the case of the OpenAlertWindow.action example, the <csactionparam> item enables the text string input by the user into the message window to be read by the JavaScript code. There are two attributes of the <csactionparam> tag.

NAME: Parameter name. This name can be arbitrarily chosen but must exactly match the parameter name of the associated field in the layout box. In this example the value is “msg”, you’ll notice that the name of the box in the layout grid is also “msg”, these two values must be identical.

TYPE: Type of parameter. The Parameter Types are predefined values which allow you to add common elements like pulldown menus, check boxes, text entry fields, etc. into the dialog box. There are a total of 13 possible parameter types which you can use.

Parameter Types and Their Associated Inspector Elements

Parameters	Attributes	Elements
GLActionBoolP aram	Standard Checkbox Example: Flip Move.action
GLActionColor Param	Control to define a Color. Example: Set BackColor.action
GLActionCondi tionParam	Special Control to choose Condition Actions. Condition Actions can return TRUE or FALSE. Example: Condition.action
GLActionEnum Param	Pop-up Menu Control Example: Wipe Transition.action
GLActionGroup Param	Special Control to choose unlimited numbers of Actions. Example: Action Group.action
GLActionImage Param	Pop-up Menu Control (lists all named images of the current document) Example: Set Image URL.action
GLActionLayer Param	Pop-up Menu Control (lists all Layers of the current document) Example: Flip Move.action
GLActionLayer PosParam	Control to define a position of a layer. Example: Flip Move.action
GLActionNumP aram	Editable Text Field for Numbers Example: Flip Move.action
GLActionPlugI nParam	Pop-up Menu Control (lists all named plug-ins (only Audio!) of the current document) Example: Play Sound.action
GLActionScen eParam	Pop-up Menu Control (lists all scenes (Timeline) of the current document) Example: Play Scene.action
GLActionString Param	Editable Text Field Example: Open Alert Window.action
GLActionURLP aram	Control to define a URL. Example: Set Image URL.action


JavaScript source
Creating your own actions

JavaScript source

The JavaScript source icon ( [image]) contains the JavaScript code which gets executed by the action when it runs. You can include any number of JavaScript code snippets in this area, either creating your own or including some of the .scpt files included in the actions folder. To edit the JavaScript, double-click on it to bring up the script editor and reveal the source code. Note that imported .scpt file includes are protected and cannot be edited in the script editor, you must edit the .scpt file directly. Scripts which you create from scratch can always be edited in this mode.

In this example double-clicking the script icon reveals the following code:

function CSOpenAlert(action) { alert(action[1]); }

The function name used in the script must be identical to the one defined in the <csactionclass>. This function immediately calls the JavaScript alert method to display the alert box. The alert method takes a single parameter. By specifying action [1], you’re passing a value taken from the first data input field in your action, in this case, a “msg” box. In this way all parameters defined by the <csactionparam> tag become arrays which can be referenced by their array number in any function. The first array, or action[0] (JavaScript is zero-based), refers to the function itself and should not be used. Thus, an action utilizing 4 parameters would use action[1] – action[4] to reference the parameters.


Layout grid
Creating your own actions

Layout grid

The Layout Grid provides a way to build your own Inspector windows for Adobe GoLive actions. If you look at the Inspector box for the Alert action, you’ll see how the layout grid corresponds to the contents of this window.


Customizing the dialog box
Creating your own actions

Customizing the dialog box

You can customize this window further by adding additional elements. Make a copy of the alert.action file and name it something like test.action. Now open the file in Adobe GoLive where you will alter its contents.

Try clicking on the field containing the text “Message”. You’ll notice the Action Control Inspector comes up and lists this as a Static Text item whose name is “Message”. You can change the text listed here by changing its name. Now click on the blank entry field and you’ll see this is listed as a Param Name. The Param Name corresponds to the <csactionparam> tag above. Anything entered in this field will become an array value which gets passed to the JavaScript code. In this example any string input here can be referenced in the script by the array value “action[1]”.

Now expand the layout grid vertically so that it measures about 75 pixels high. Ctrl-click (Windows) or Option-click (Mac OS) on the “Message” text and drag it to the bottom of the grid so that it makes a duplicate copy (note, you must duplicate these elements, you cannot just drag in a new text box). Change the type from Static Text to Info Text and the name of the message to: “This action brings up an alert box”. Then press Enter. Info Text allows you to include textual information in the dialog box. This is a good way to instruct the user about the action or provide annotation.


Action tutorials
Creating Actions

Action tutorials

The following sections guide you through the process of creating actions. You can create actions in two ways:

•   Using an existing action file. First you duplicate and rename an existing action file, make changes and save the file, and then place the action file in the action folder (or subfolder).

•   Using a template action file (a template file is included in Adobe GoLive). Duplicate and name the template, make changes, and then place it in the action folder.

See also:

Tutorial #1: Goto previous page action

Tutorial #2: Resize window action

Annotating actions


Tutorial #1: Goto previous page action
Action tutorials

Tutorial #1: Goto previous page action

Now we will create a very simple but useful action which uses a single JavaScript function and requires no parameter inputs. This is the simplest kind of action and can be repeated with any type of JavaScript function. In this case we will use history.back(), a built–in JavaScript method which causes the previous page in the browser to load when the action is triggered.

1  The first thing you need to do is to duplicate an existing action file and rename it. Adobe GoLive 4.0 includes a template folder with a blank action ready to duplicate. Also in Adobe GoLive 4.0 you can create a new subfolder in the actions folder and call it “test” or some other unique name. With version 3.0 you can just put the file in with the rest of the actions in the actions folder. With this example you can just duplicate the alert.action file into the appropriate folder and rename it PreviousPage.action. You can change the icon later. Open the file in Adobe GoLive to begin editing it.

2  The next step is to give the action a new Title. Remember the title can be anything you like, this title will only appear in the layout view. Try something like “Go Previous URL Action”.

3  Next you need to define the action class. Click on the <csactionclass> tag to bring up the tag inspector and view its attributes. The first attribute is NAME. The NAME can also be anything you like, but this is the name that will appear in the Adobe GoLive actions pop-up menu. Try “Go Last Page”. At this point if you quit and restart Adobe GoLive you would have a new action entitled “Go Last Page” in the actions menu.

4  The next attribute is FUNCTION. This value must correspond to the name of the function in your JavaScript code. Since you haven’t written the code yet you can make up a function name now, as long as you repeat it later in the code. Try “CSGoBack1”. You don’t need to use the first two letters CS, the included actions only use this to make the function names more unique to avoid the possibility of creating duplicate function names.

5  The final two attributes are the Netscape and Explorer supported browser versions. If you’re creating your own actions, you’ll have to determine for yourself which browsers will support the code you are using. In the case of this action, the history.back() method is supported by Netscape 3 browsers and above and Internet Explorer 3 browsers and above (you’ll have to determine this on your own by testing your code in each browser). Enter the number 3 into each field. Now you have defined your action class object

Important: At this basic level, the action will not perform any browser checking and may produce errors with earlier unsupported browsers. This is dependent on the behavior of the JavaScript code itself. It is possible to do browser checking, but this requires extra coding and can be accomplished with the inclusion of an if() statement at the beginning of the script which checks the User Agent or appVersion of the browser. It’s good practice to design your actions so they are well behaved in all browsers. In other words, where the script doesn’t work, it should be ignored by the browser and not produce any errors.

Since this script won’t require any user input, it won’t need a <csactionparam> tag. Delete this tag from the page. Now you have only an opening and closing <csactionclass> tag, the minimum required for an action file.

6  Now it’s time to put in your JavaScript code. You do this by double-clicking on the code icon to bring up the Script Editor. Replace the existing code with the following:

function CSGoBack1() { history.back() }

With all Adobe GoLive actions, you embed your JavaScript code between the two curly brackets of the initial function. In this case the initial function is: CSGoBack1() {}

This code is an example of a very simple script which uses no arguments, thus it requires no parameter values. For info on how parameters work see the next example.

7  The last step in creating this action is to modify the layout grid for the dialog box content. Since there are no input fields you can delete the “msg” field and change the “message” field to an Info Text type using the pull-down menu in the Action Control Inspector. Now you can include a message for the user by typing it into the name field, something like “Use this action to return to the previous URL”.

After you save your action, you’ll be ready to apply it in Adobe GoLive. Remember you need to restart the application in order for your new action to load into Adobe GoLive and appear in the actions menu. If on restarting the application, Adobe GoLive crashes or you get an error message, it means there’s an error in your action file. Just remove the action from the folder and restart. Adobe GoLive 4.0 will also generate an error message and a log file listing the offending action.


Tutorial #2: Resize window action
Action tutorials

Tutorial #2: Resize window action

Now you will create a slightly more complicated action, one that requires input values and passes this info to the JavaScript code for handling.

1  Duplicate an existing action and this time save it as, ResizeWindow.action

2  Change the action title to Resize Window Action

3  Now define the action class. Click on the <csactionclass> tag to bring up the tag inspector and view its attributes. The first attribute is NAME. In this example you will enter “Resize Window” as the value.

4  Now you’ll define the FUNCTION. Enter “CSResizeWindow”, which will correspond to the function you’ll create for the JavaScript in step 7, ResizeWindow().

5  Since the resizeTo() method only works in 4.0 browsers, you should enter 4 for both the Netscape and IE versions for the next two attributes.

6  This action uses two parameters or arguments, one for the width of the new window, and one for the height. The actual JavaScript function you’ll use is window.ResizeTo(x,y), where x stands for the new width and y the new height. What you want to create is a dialog box that let’s the user enter in the new width and height directly into the inspector.

The way this is accomplished is by using the <csactionparam> tag. Click on the first <csactionparam> tag to view its attributes.

There are only two attributes here, but numerous possible values. For the NAME attribute you will need to select a name which will correspond to the field where the user will enter that value. So in this case you will enter “x” for width. The TYPE attribute allows you to define the type of dialog box element the user will use for input. If you look back at the list of parameter types you’ll see that an editable text field for entering numbers is the GLActionNumParam. Enter this as the value for the TYPE attribute.

Now you’ll need a second <csactionparam> tag to correspond to the height field. Copy and paste this tag to duplicate it, then highlight it to bring up the Tag Inspector. Now you just need to change the NAME attribute value to “y” and leave the TYPE as is since this will also be an editable number field.

7  In this step you will enter the JavaScript code. First rename the script to “Resize Window Script” and double-click on it to open up the JavaScript editor. Enter in the following code:

function CSResizeWindow(action) {

window.resizeTo (action[1],action[2])

}

In this example you include two array values, action[1] corresponds to “x” and action[2] corresponds to “y”. So essentially you are saying, when the CSResizeWindow () function executes, execute the function window.resizeTo(x,y), where “x” is the value entered for width and “y” is the value entered for height. Had you entered a width and height of 640 by 480, the code would evaluate as:

function CSResizeWindow(action) {

window.resizeTo (640,480)

}

Now here comes the caveat! Welcome to the world of cross-browser JavaScripting.! If you test the preceding script in Netscape 4 on Mac and PC it works fine. In IE4 on the PC it works fine but on the Mac it doesn’t do anything. Worse, in the 3.0 browsers the script will generate an error. While not executing the action might be tolerable, generating an error is not, so you’ll now add some code to prevent errors in earlier browsers. As a rule, you should carefully design your actions so that they don’t generate errors in any browser, this holds true for both Mac and PC platforms. And of course the more browsers your action works with the more useful it will be to the end user.

Since the script only produces errors in 3.0 browsers, you need to add a statement which instructs the script to execute only if the user is surfing with a 4.0 or above browser. For earlier browsers the script will just be ignored. For this we can use the appVersion property to determine the browser version and include this in an if () statement. Any function included in the curly brackets of this script will only execute if the browser version is greater than or equal to 4:

if (navigator.appVersion.charAt(0) >=4) { }

So you would then modify the script to:

function CSResizeWindow(action) {

if (navigator.appVersion.charAt(0) >=4)

{window.resizeTo (action[1],action[2])

}

}

8  The last step in creating this action is to modify the layout grid for the Inspector content. You’ll need two input fields corresponding to width and height. These fields will hold the values of x (action[1])and y (action[2]). Click on the existing input field to bring up the Actions Control Inspector. Choose Param Name from the pulldown menu and name it “x” (no quotes). Now duplicate the tag using Ctrl-drag (Windows) or Option-drag Mac OS) or copy and paste. Change the name on the copy to “y”. You can also add the descriptive text by clicking on the descriptive text field and choosing “Static text” from the pulldown menu. Static text is text which doesn’t change, in this case you will have two fields, one which says width and the other height, directly to the left of the input fields.


Annotating actions
Action tutorials

Annotating actions

Adobe GoLive allows you to further customize the display of the Inspector window to provide more information about the action to the end user. You can add static text, informational text, or an image with an associated URL right into your action layout grid. All of these items are selectable in the Actions Control Inspector pulldown menu.

Static Text Static text is used to label the entry fields or components added to the layout grid. They appear static and cannot be altered by the end user. In the previous example, the words height and width were created as static text. Static text appears in bold in the Inspector.

Info Text Info text is simply text you add to provide information about the action. You could add a comment such as, “This action generates a random image when added to a page”. Info text appears non-bolded in the Inspector

Copyright banner It is also possible to add an image to your layout and link it to a URL. This is useful if you’d like to add a company logo to get credit for creating the action and providing a link to your company website. To add an image just drag an image icon from the Palette onto your layout grid, select an image and attach a URL to it in the Image Inspector.


Difference between actions and scripts
Creating Actions

Difference between actions and scripts

You may notice that Adobe GoLive also includes some built-in Scripts, which are somewhat similar to Actions. These are scripts such as the URL Pop-up or Browser Switch item in the CyberObjects section of the Palette window.

Adobe GoLive Scripts differ from Actions in several ways. Take a look at the Jscripts folder to see how these are organized.

Here you will see the organization of Adobe GoLive script and action files. Adobe GoLive Script files are JavaScript snippets saved with the .scpt extension. Adobe GoLive actions are HTML files which include several components and usually use the .action extension. Open up the file UPMain.scpt in the URLPopup folder. You will see that it only contains the JavaScript code for the URLPopup menu item:

function CSURLPopupShow(formName, popupName, target) {

var pop-up = document[formName].elements[popupName];

window.open(pop-up.options[pop-up.selectedIndex].value, target);

pop-up.selectedIndex = 0;

}

This is the actual JavaScript code that is used when you place an URLPopup object into a web page. Adobe GoLive will fetch the code from this file and place it into your HTML. If you want, you can modify this code with your own JavaScript, and Adobe GoLive will use this code instead. As long as you create valid code and save it in the correct location with the proper extension, you can customize a script file however you like. However, a big difference between scripts and actions is that if you create new scripts they do not show up automatically in Adobe GoLive. New scripts can only be accessed by referencing them from within actions or from within other scripts. The CyberObjects available in the Adobe GoLive Palette window are hard coded in C++ and can not currently be extended.